List Tag
Choose between ul
and ol
tags when creating a List.
Important Notes:
The ul
tag is for grouping a collection of items that do not have a numerical ordering, and their order in the list is meaningless.
On the other hand, with the ol
tag, the order is meaningful.
Demo
UL
OL
-
Item 1
-
Item 2
-
Item 3
Twig
{% set list_items %}
{% include '@bolt-elements-list/list-item.twig' with {
content: 'first item',
} only %}
{% include '@bolt-elements-list/list-item.twig' with {
content: 'second item',
} only %}
{% include '@bolt-elements-list/list-item.twig' with {
content: 'third item',
} only %}
{% endset %}
{% include '@bolt-elements-list/list.twig' with {
tag: 'ol',
content: list_items
} only %}
HTML
<ol class="e-bolt-list">
<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>
</ol>