Bolt Design System

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

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

  npm install @bolt/components-action-blocks

Dependencies

@bolt/components-icon

@bolt/core-v3.x

Action blocks

A grid layout of actions consist of icon and text.