Bolt Design System

Twig Usage

{% set list_items %}
  {% include '@bolt-elements-list/list-item.twig' with {
    content: placeholder_1,
  } only %}
  {% include '@bolt-elements-list/list-item.twig' with {
    content: placeholder_2,
  } only %}
  ...
{% include '@bolt-elements-list/list.twig' with {
  content: list_items
} only %}

Schema

List (list.twig)

Prop Name	Description	Type	Default Value	Option(s)
attributes	A Drupal-style attributes object with extra attributes to append to this element.	`object`	—	—
content	Content of the List. List Items are expected here.	`any`	—	—
tag	Set the semantic tag for the list.	`string`	`ul`	`ul` or `ol`
display	Display either an horizontal list of items or a vertical list of items. Responsive options are also available for transforming from block to horizontal at specific breakpoints.	`string`	`vertical`	`vertical`, `horizontal`, `horizontal@xxsmall`, `horizontal@xsmall`, `horizontal@small`, `horizontal@medium`
spacing	Control the spacing in between items.	`string`	`xsmall`	`none`, `xxsmall`, `xsmall`, `small`, `medium`, `large`, `xlarge`
separator	Display a separator in between items.	`string`	`none`	`none`, `solid`, `dashed`
align	Control the horizontal alignment of items.	`string`	`start`	`start`, `center`, `end`, `justify`
valign	Control the vertical alignment of items.	`string`	`center`	`start`, `center`, `end`
inset	Set spacing on the inside of each item.	`boolean`	`false`	—
nowrap	Prevent horizontal/flex list items from wrapping to a second line.	`boolean`	`false`	—

List Item (list-item.twig)

Prop Name	Description	Type	Default Value	Option(s)
attributes	A Drupal-style attributes object with extra attributes to append to this element.	`object`	—	—
content	Content of the List Item.	`any`	—	—

Install

npm install @bolt/elements-list

Dependencies

@bolt/core-v3.x

List

Semantic list for displaying a group of items.