2.24.1Action Blocks Component in Bolt
Stylistic block layout for displaying actionable icon and text. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.
npm install @bolt/components-action-blocks
Action blocks work as a group to provide the user an easy to browse list of options of relativeto take action to discover more information. They commonly exist as links to more detailed content.
{% 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 %}
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
|
|
| max_items_per_row | The max amount of items (action blocks) to be displayed in one row. |
number
|
6
|
|
| valign | Vertical alignment of the content inside each action block. |
string
|
start
|
|
| borderless | Removes the border in between each action block. |
boolean
|
false
|
|
| contentItems | Content items to populate the action blocks. |
array
| — |
|
| maxItemsPerRow | Use max_items_per_row prop instead. |
| — |
|
| align | Use valign prop instead. |
| — |
|
| border | Use borderless prop instead. |
| — |
|