Back to the pattern library

Numbered list

Numbered lists are used to indicate a logical sequence.

More detailed information on how to use our typography can be found in our design guidance.

Example

Example

HTML

<ol>
    <li>Put on socks.</li>
    <li>Put on shoes.</li>
    <li>Tie laces.</li>
</ol>

SCSS

The styles for this pattern can be found in the foundations on github.

JS

There is no javascript needed for this component.

Design and content

Numbered lists have:

  • a font size of 20px above 750px and 16px below 750px
  • a left hand padding of 42px
  • a bottom margin of 32px

Accessibility

We are currently working on this.

For more information see our general guide on accessibility.

Suggest a pattern

Use this form to suggest a new pattern or a change to an existing one.

Suggest a new pattern or a change