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
Inset spacing in a vertical list
Regular spacing in a horizontal list
Inset spacing in a horizontal list
Regular spacing in a horizontal@medium list
Inset spacing in a horizontal@medium list
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>