List
Lists display a set of related content.
On this page
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
Current active theme is Sainsbury's. You can see all developer documentation on our Fable Storybook site.
- ListItem 1 content
Types of list
Inline list
An inline list removes all styling and throws the items horizontally. The spaced prop adds horizontal spacing.
Current active theme is Sainsbury's. You can see all developer documentation on our Fable Storybook site.
- ListItem 1 content
Content 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.