action blocks docs

Action blocks

A grid layout of actions consist of icon and text.

Published Last updated: 2.25.0 Change log Github NPM
Twig Usage
  {% include "@bolt-components-action-blocks/action-blocks.twig" with {
  contentItems: [
    {
      text: "Item 1",
      url: "#!",
      icon: {
        name: "icon-name",
        size: "large",
        background: "circle"
      }
    },
    {
      text: "Item 2",
      url: "#!",
      icon: {
        name: "icon-name",
        size: "large",
        background: "circle"
      }
    },
    {
      text: "Item 3",
      url: "#!",
      icon: {
        name: "icon-name",
        size: "large",
        background: "circle"
      }
    }
  ]
} 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
  • true or false
contentItems

Content items to populate the action blocks.

array
  • [items]:
    • Type:object
    • Properties:
      • text
        • Type: string
      • url
        • Type: string
      • icon
        • Type: object
        • Properties:
          • name
          • size
          • background
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