Lists - Component

All of these list patterns require no extra classes and style the correct semantic element.

Code

Source (Nunjucks)

<ol>
{% for item in data.items %}
  <li>{{ item }}</li>
{% endfor %}
</ol>

Output

<ol>
  <li>A standard ordered list</li>
  <li>Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</li>
  <li>Pellentesque Condimentum Dapibus Cursus Sit</li>
</ol>

Variants

Description list

View full screen

Code

Source (Nunjucks)

<dl>
  {% for item in data.items %}
  <dt>{{ item.key }}</dt>
  {% for value in item.values %}
  <dd>{{ value }}</dd>
  {% endfor %}
  <!--prettier-ignore-->
  {% endfor %}
</dl>

Output

<dl>
  <dt>First Term</dt>
  <dd>This is the definition of the first term.</dd>
  <!--prettier-ignore-->
  <dt>Second Term</dt>
  <dd>This is one definition of the second term.</dd>
  <dd>This is another definition of the second term.</dd>
  <!--prettier-ignore-->
</dl>

Unordered list

View full screen

Code

Source (Nunjucks)

<ul>
{% for item in data.items %}
  <li>{{ item }}</li>
{% endfor %}
</ul>

Output

<ul>
  <li>An unordered list</li>
  <li>Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</li>
  <li>Pellentesque Condimentum Dapibus Cursus Sit</li>
</ul>