List Tag Choose between ul and ol tags when creating a List or span in a specific usecases.
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. Sometimes a semantic list ul or ol need to be converted to non-semantic version due to design purposes - for achieving visual effect. Find special usecases when a span is used. It's important to know that ul and ol have their own styles. When using span tag, font-family, font-size, font-weight, line-height, inherit from parent element.
Demo

UL

  • Item
  • Item
  • Item

OL

  1. Item 1
  2. Item 2
  3. Item 3

SPAN

Item
Item
Item
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>