List
Getting Started
Minimal list component for laying out a group of items. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.
Install via NPM
npm install @bolt/components-list
Usage
{% include "@bolt-components-list/list.twig" with {
display: "inline",
spacing: "xsmall",
align: "start",
valign: "center",
items: [
"Item 1",
include("@bolt-components-link/link.twig", {
text: "Item 2",
url: "#!",
}),
include("@bolt-components-chip/chip.twig", {
text: "Item 3",
url: "#!",
}),
include("@bolt-components-button/button.twig", {
text: "Item 4",
url: "#!",
size: "small",
}),
"Item 5",
]
} only %}Schema
Minimal list component for laying out a group of items.
| Name | Type | Value(s) | Description | Default |
|---|---|---|---|---|
| attributes | object
| |
A Drupal-style attributes object with extra attributes to append to this component. |
N/A |
| items* | array
| |
All items can be simple text or |
N/A |
| tag | string
|
|
Apply the semantic tag for the list. |
ul
|
| display | string
|
|
Display either an inline list of items or a block (stacked) list of items. Responsive options are also available for transforming from block to inline at specific breakpoints. |
block
|
| spacing | string
|
|
Control the spacing in between items. |
xsmall
|
| separator | string
|
|
Display a separator in between items. |
none
|
| inset | boolean
| |
Turn spacing to the inside of each item. |
false
|
| align | string
|
|
Control the horizontal alignment of items. |
start
|
| valign | string
|
|
Control the vertical alignment of items. |
center
|