Action Blocks
A grid layout of actions consist of icon and text.
{% set icon %}
{% include "@bolt-elements-icon/icon.twig" with {
name: "icon-name",
}%}
{% endset %}
{% set shape %}
{% include '@bolt-elements-shape/shape.twig' with {
content: icon,
}%}
{% endset %}
{% include "@bolt-components-action-blocks/action-blocks.twig" with {
items: [
{
text: "Item 1",
url: "#!",
media: shape,
},
{
text: "Item 2",
url: "#!",
media: shape,
},
{
text: "Item 3",
url: "#!",
media: shape,
}
]
} only %}
| 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
|
|
|
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
| — |
|
|
maxItemsPerRow
(deprecated) |
Use max_items_per_row prop instead. |
— | — |
|
|
align
(deprecated) |
Use valign prop instead. |
— | — |
|
|
border
(deprecated) |
Use borderless prop instead. |
— | — |
|
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 |
— | — |
|
npm install @bolt/components-action-blocks
