List Spacing Modify the space between List Items. Important Notes: Regular spacing used in combination with the inset prop puts additional spacing around each List Item. Demo

Vertical list with spacing (none)

  • Item 1
  • Item 2
  • Item 3

Vertical list with spacing (xxsmall)

  • Item 1
  • Item 2
  • Item 3

Vertical list with spacing (xsmall)

  • Item 1
  • Item 2
  • Item 3

Vertical list with spacing (small)

  • Item 1
  • Item 2
  • Item 3

Vertical list with spacing (medium)

  • Item 1
  • Item 2
  • Item 3

Vertical list with spacing (large)

  • Item 1
  • Item 2
  • Item 3

Vertical list with spacing (xlarge)

  • Item 1
  • Item 2
  • Item 3

Horizontal list with spacing (none)

  • Item 1
  • Item 2
  • Item 3

Horizontal list with spacing (xxsmall)

  • Item 1
  • Item 2
  • Item 3

Horizontal list with spacing (xsmall)

  • Item 1
  • Item 2
  • Item 3

Horizontal list with spacing (small)

  • Item 1
  • Item 2
  • Item 3

Horizontal list with spacing (medium)

  • Item 1
  • Item 2
  • Item 3

Horizontal list with spacing (large)

  • Item 1
  • Item 2
  • Item 3

Horizontal list with spacing (xlarge)

  • Item 1
  • Item 2
  • Item 3
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 {
  spacing: 'medium',
  content: list_items,
} only %}
HTML
<ul class="e-bolt-list e-bolt-list--spacing-medium">
  <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>