action blocks docs

Action Blocks

A grid layout of actions consist of icon and text.

Published Last updated: 4.2.0 Change log Github NPM
Twig Usage
  {% set icon %}
  {% include "@bolt-components-icon/icon.twig" with {
    name: "icon-name",
    background: "circle",
    size: "large"
  }%}
{% endset %}

{% include "@bolt-components-action-blocks/action-blocks.twig" with {
  items: [
    {
      text: "Item 1",
      url: "#!",
      media: icon,
    },
    {
      text: "Item 2",
      url: "#!",
      media: icon,
    },
    {
      text: "Item 3",
      url: "#!",
      media: icon,
    }
  ]
} only %}
Schema
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
Action blocks
Prop Name Description Type Default Value Option(s)
attributes

A Drupal-style attributes object with extra attributes to append to this component.

object
spacing

Spacing surrounding each action block.

string medium
  • xsmall, small, medium
max_items_per_row

The max amount of items (action blocks) to be displayed in one row.

number 6
  • 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12
valign

Vertical alignment of the content inside each action block.

string start
  • start, center, end
borderless

Removes the border in between each action block.

boolean false
content

Free form content to populate the action blocks

string , array , object
children
(deprecated)

Use content prop instead.

items

Content items to populate the action blocks.

array
  • See below
maxItemsPerRow
(deprecated)

Use max_items_per_row prop instead.

align
(deprecated)

Use valign prop instead.

border
(deprecated)

Use borderless prop instead.

Action blocks: items
Prop Name Description Type Default Value Option(s)
attributes

A Drupal-style attributes object with extra attributes to append to this component.

object
text
string
url
string
media

Renderable media content (i.e. a string, render array, or included pattern) for this item, usually an icon or an image

string , object , array
icon
(deprecated)

Use media prop instead and pass a fully rendered icon

Install Install
  npm install @bolt/components-action-blocks
Dependencies @bolt/components-icon @bolt/core-v3.x

action blocks

Action Blocks inside a xlight themed container

Action Blocks inside a light themed container

Action Blocks inside a dark themed container

Action Blocks inside a xdark themed container