Lists
HTML lists are used extensively throughout this site. This is unsurprising as many pages contain lists of things, like diary posts or articles.
Standard lists
You can apply the class list
to any ul
or ol
element to create a nicely styled collection like this:
View the code for this example
<ul class="list">
<li>A list item can be any element, or component.</li>
<li>A list item can be any element, or component.</li>
<li>A list item can be any element, or component.</li>
</ul>
Grid lists
You can apply the class list list--grid
to any ul
or ol
element to create a nicely styled collection. It’s usually used with the Card component, like this:
View the code for this example
{% from 'includes/card.njk' import card as card %}
{% macro callCard() %}
{{ card({
title: 'Example card',
caption: 'An exciting example',
url: '#',
date: {
datetime: '2023-08-20T00:00:00Z',
title: '20 August 2023'
}
})}}
{% endmacro %}
<ul class="list list--grid">
<li>{{ callCard() }}</li>
<li>{{ callCard() }}</li>
<li>{{ callCard() }}</li>
<li>{{ callCard() }}</li>
</ul>