Back to the pattern library

Bullet list

Lists are an effective way of breaking up content — they make it easier for users to scan and find information. Use bullet points to break up a list of items.

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

Example

Example

HTML

<p>The meeting agenda will be:</p>
<ul>
    <li>an overview of the last month</li>
    <li>a presentation</li>
    <li>a special announcement</li>
</ul>

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

Bullet 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