List

Semantic list for displaying a group of items.

Published Last updated: 5.8.0 Change log Github NPM
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
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
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 Install
npm install @bolt/elements-list
Dependencies @bolt/core-v3.x