List

Semantic list for displaying a group of items.
Usage recommendations
Recommended Not Recommended
List Related Items: Stick to items that belong in the same category or serve a similar function. Skip Complexity: Avoid embedding complex structures like nested lists or other HTML elements unless essential.
Order Matters: If the sequence is important, use an ordered list. Otherwise, an unordered list will suffice. Not for Layout: Don't use lists for page layout or to achieve visual design effects.
Concise Items: Keep list items short and to the point for easy scanning. Avoid Mixing Types: Stick to either ordered or unordered lists within a single list block to prevent confusion.
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 Install 
npm install @bolt/elements-list
Dependencies @bolt/core