Bolt Design System

List with Inset Spacing

Add inset spacing to List Items.

Important Notes:

The inset prop adds a space on all sides of List Items.

Demo

Regular spacing in a vertical list

Item 1
Item 2
Item 3

Inset spacing in a vertical list

Item 1
Item 2
Item 3

Regular spacing in a horizontal list

Item 1
Item 2
Item 3

Inset spacing in a horizontal list

Item 1
Item 2
Item 3

Regular spacing in a horizontal@medium list

Item 1
Item 2
Item 3

Inset spacing in a horizontal@medium list

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 {
  separator: 'solid',
  inset: true,
  content: list_items
} only %}

HTML

<ul class="e-bolt-list e-bolt-list--separator-solid e-bolt-list--inset">
  <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>