List Display The display of the List Items can be set to vertical or horizontal. Important Notes: When the display prop is set to vertical, List Items are full-width, stacked on one another. When the display prop is set to horizontal, List Items are side by side and take the width of the content. List Items can be of different widths if the content differs in length. When the display prop is set to horizontal@[Breakpoint], List Items are vertical below the specified breakpoint (xxsmall, xsmall, small or medium) and horizontal above the breakpoint. View the following Lists in different viewports to observe the behavior. Demo

Vertical List Items are full-width.

  • Item One
  • Item Two
  • Item Three
  • Item Four
  • Item Five
  • Item Six

Horizontal List Items wrap and are only content-width.

  • Item One
  • Item Two
  • Item Three
  • Item Four
  • Item Five
  • Item Six
  • Item Seven
  • Item Eight
  • Item Nine
  • Item Ten

A horizontal@medium List is horizontal above the chosen breakpoint and vertical below.

  • Item One
  • Item Two
  • Item Three
  • Item Four
  • Item Five
  • Item Six
Twig
{% 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-item.twig' with {
      content: placeholder_3,
    } only %}
  {% endset %}
{% include '@bolt-elements-list/list.twig' with {
  display: 'horizontal',
  content: list_items
} only %}
HTML
<ul class="e-bolt-list e-bolt-list--display-horizontal">
  <li class="e-bolt-list__item">First item</li>
  <li class="e-bolt-list__item">Second item</li>
  <li class="e-bolt-list__item">Thitd item</li>
</ul>