Bolt Design System

Basic List

The List element represents a list of items.

Important Notes:

A List is for grouping a collection of items and shouldn't be used for creating layouts. For creating a page layout, it's recommended to use Layout.

The List element is a replacement for the List component.

Demo

Item 1
Item 2
Item 3

Twig

{% set placeholder_1 %}
  {% include '@bolt-components-placeholder/placeholder.twig' with {
    text: 'Item 1',
    size: 'xsmall',
  } only %}
{% endset %}

{% set placeholder_2 %}
  {% include '@bolt-components-placeholder/placeholder.twig' with {
    text: 'Item 2',
    size: 'xsmall',
  } only %}
{% endset %}

{% set placeholder_3 %}
  {% include '@bolt-components-placeholder/placeholder.twig' with {
    text: 'Item 3',
    size: 'xsmall',
  } only %}
{% endset %}

{% 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 {
  content: list_items
} only %}

HTML

<ul class="e-bolt-list">
  <li class="e-bolt-list__item">Item 1</li>
  <li class="e-bolt-list__item">Item 2</li>
  <li class="e-bolt-list__item">Item 3</li>
</ul>