action blocks docs

Action blocks

A grid layout of actions consist of icon and text.

Published Last updated: 3.1.2 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.
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
  • [items]:
    • Type:string, object, array

      Either a renderable item (string or render array) or an object with specific properties.

    • Properties:
      • attributes

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

        • Type: object
      • text
        • Type: string
      • url
        • Type: string
      • media

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

        • Type: string, object, array
      • icon

        Use media prop instead and pass a fully rendered icon

maxItemsPerRow
(deprecated)

Use max_items_per_row prop instead.

align
(deprecated)

Use valign prop instead.

border
(deprecated)

Use borderless prop instead.

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