List with Separator List Items can be separated by a horizontal or vertical line. The separator style can be solid or dashed. Important Notes: The separator color adjusts automatically based on the Theming System. If required, you can override the separator's color by changing the List's --m-bolt-border CSS var with the attributes object. Demo

Solid separators in a vertical list

  • Item 1
  • Item 2
  • Item 3

Solid separators in a horizontal list

  • Item 1
  • Item 2
  • Item 3

Solid separators in a horizontal@medium list

  • Item 1
  • Item 2
  • Item 3

Dashed separators in a vertical list

  • Item 1
  • Item 2
  • Item 3

Dashed separators in a horizontal list

  • Item 1
  • Item 2
  • Item 3

Dashed separators in a horizontal@medium list

  • Item 1
  • Item 2
  • Item 3
Twig
{% set list_items %}
  {% include '@bolt-elements-list/list-item.twig' with {
    content: item_1,
  } only %}
  {% include '@bolt-elements-list/list-item.twig' with {
    content: item_2,
  } only %}
  {% include '@bolt-elements-list/list-item.twig' with {
    content: item_3,
  } only %}
{% endset %}
{% include '@bolt-elements-list/list.twig' with {
  separator: 'solid',
  content: list_items
} only %}
HTML
<ul class="e-bolt-list e-bolt-list--separator-solid">
  <li class="e-bolt-list__item">First item</li>
  <li class="e-bolt-list__item">Second item</li>
  <li class="e-bolt-list__item">Third item</li>
</ul>