Lists display a set of related content.

How to use lists

Lists can be used to break up related content to make the information easier for users to read.

When using lists:

  • Use the <ul> element for lists with bullet points if the items in the list are of equal status or value
  • Use the <ol> element to create a numbered list numbers if the items in the list are a sequence, like when giving instructions
  • Use the <il> element to create a list without any bullet points or numbers
  • They should only be used for related information or content
  • Order your items in a clear way, whether it’s alphabetical, numerical, time-based or some other logical order

Types of list

Bare list

A bare list displays a list of items without the default browser styling. The items can be vertically spaced by using the spaced flag.

Inline list

An inline list removes all styling and throws the items horizontally. The spaced prop adds horizontal spacing.

Matrix list

The matrix list type is similar to an inline list but also spaces the items on the vertical axis so they tile gracefully.

Justified list

The justified list type divides the available space equally between items

Custom list items

If you're listing out items more complex than basic strings you can use the ListItem component to wrap your custom content.

Copy guidelines

When using lists:

  • Start your item labels with a capital letter
  • Don’t use commas or any punctuation at the end of each item
  • Don’t use more than three words per item

Was this page helpful?

Get in touch

Our team can answer any questions about using lists or give you a helping hand with your next project.