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:

Open this example in a new tab

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:

Open this example in a new tab

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>