Non Semantic List Use Case
Using the span tag for lists in interactive elements and other non-semantic contexts.
Important Notes:This has more of a decorative context than a semantic one or for organize content, making it more readable and visually balanced.Sometimes there are situations where we need to create a list inside an interactive element, like a button. In these cases, we cannot use standard list tags like ul or ol because, for semantic reasons, certain HTML tags cannot be nested inside others. This is an example of when it's appropriate to use the span tag to wrap list items, ensuring both functionality and semantic correctness.Additionally, there are other contexts where using ul or ol is not semantically appropriate, such as within specific structural or inline elements, and in such cases, the span tag offers a more suitable solution.
{% set list_items %}
{% include '@bolt-elements-list/list-item.twig' with {
content: 'item 1',
} only %}
{% include '@bolt-elements-list/list-item.twig' with {
content: 'item 2',
} only %}
{% include '@bolt-elements-list/list-item.twig' with {
content: 'item 3',
} only %}
{% endset %}
{% include '@bolt-elements-list/list.twig' with {
content: list_items,
tag: 'span'
} only %}