A list organizes information into discrete sections.
Status:
In use
About this element
Lists, ordered lists, numbered lists, nested lists, definition lists
Examples and code
Examples and code
Lists
Styled (Default)
- one
- two
- three
- four
Unstyled
<ul class="list--simple">- one
- two
- three
- four
Nested
- one
- two
- three
- four
- five
- six
- seven
- eight
Nested (Ordered Variation)
- one
- two
- three
- four
- five
- six
- seven
- eight
Definition Lists
Default
- A Label
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla aliquet pellentesque enim eget mollis.
- Another Label
- Pellentesque vel eros posuere, volutpat ligula in, placerat lacus.
- Yet Another Label
- Duis scelerisque, turpis a mattis placerat, odio erat pretium erat, id tempus dolor metus.
- One More Label
- Mauris viverra nibh odio, id luctus lacus eleifend vel. Cras in ultricies metus. Vestibulum laoreet nisi erat, at efficitur risus dignissim vel. Duis efficitur dictum mauris ut mattis. Mauris metus arcu, eleifend et mauris in, sodales faucibus urna.
Stacked
<dl class="dl--stacked">- A Label
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla aliquet pellentesque enim eget mollis.
- Another Label
- Pellentesque vel eros posuere, volutpat ligula in, placerat lacus.
- Yet Another Label
- Duis scelerisque, turpis a mattis placerat, odio erat pretium erat, id tempus dolor metus.
- One More Label
- Mauris viverra nibh odio, id luctus lacus eleifend vel. Cras in ultricies metus. Vestibulum laoreet nisi erat, at efficitur risus dignissim vel. Duis efficitur dictum mauris ut mattis. Mauris metus arcu, eleifend et mauris in, sodales faucibus urna.
Inline
<dl class="dl--inline">- A Label
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla aliquet pellentesque enim eget mollis.
- Another Label
- Pellentesque vel eros posuere, volutpat ligula in, placerat lacus.
- Yet Another Label
- Duis scelerisque, turpis a mattis placerat, odio erat pretium erat, id tempus dolor metus.
- One More Label
- Mauris viverra nibh odio, id luctus lacus eleifend vel. Cras in ultricies metus. Vestibulum laoreet nisi erat, at efficitur risus dignissim vel. Duis efficitur dictum mauris ut mattis. Mauris metus arcu, eleifend et mauris in, sodales faucibus urna.
Guidance
When to use
- Ordered list: Use an ordered list when you need to display text in some ranking, hierarchy, or series of steps.
- Unordered list: Use unordered lists to display text in no specific order.
- Definition list: The purpose of description lists is to mark up a set of items and their associated descriptions, such as terms and definitions, or questions and answers.
When to consider something else
- If you need to communicate long lists of narrative text.
Usability guidance
- Use sentence case and begin lists with a capital letter.
- Use punctuation appropriate to the text. Do not leave sentences without periods.