Lists

Use lists to make blocks of text easier to read and break information into manageable chunks.

Use lists to make blocks of text easier to read and break information into manageable chunks. Use an unstyled list for lists of links.

<ul class="govuk-list">
  <li><a class="govuk-link" href="/example">Example link</a></li>
  <li><a class="govuk-link" href="/another-example">Another link</a></li>
</ul>

Bulleted lists

Introduce a bulleted list with a lead-in line ending in a colon. Start each item with a lowercase letter and do not use a full stop at the end.

<p class="govuk-body">You can buy:</p>
<ul class="govuk-list govuk-list--bullet">
  <li>apples</li>
  <li>oranges</li>
</ul>

Numbered lists

Use a numbered list when the order of the items matters. Items should be complete sentences and end with a full stop.

<ol class="govuk-list govuk-list--number">
  <li>Delivery address.</li>
  <li>Payment.</li>
  <li>Confirmation.</li>
</ol>

Spacing between list items

Use govuk-list--spaced when list items wrap over multiple lines or need more space to be easy to scan. Large link lists generally use 16px text, 20px line height and 30px between items; small link lists use 14px text, 16px line height and 24px between items.