Pattern library

Lists

View full screen

Details

Source (Nunjucks)

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

Output

<ol>
<li>A standard ordered list</li>
</ol>

<ol>
<li>Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</li>
</ol>

<ol>
<li>Pellentesque Condimentum Dapibus Cursus Sit</li>
</ol>

Variants

Description list

View full screen

Details

Source

<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

Details

Source

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

Output
<ul>
<li>An unordered list</li>
</ul>

<ul>
<li>Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</li>
</ul>

<ul>
<li>Pellentesque Condimentum Dapibus Cursus Sit</li>
</ul>