Figma
StorybookNotice:
Typography sizing updates!
We've updated typography sizing variables and class names to separate semantics from presentation. Read about how you can update.
Examples
Unordered list
.ds-c-list
Ordered list
.ds-c-list
Bare list
.ds-c-list .ds-c-list--bare
Unstyled list
role="list"
Guidance
When to use
- Use an ordered list when you need to display text in some ranking, hierarchy, or series of steps.
- Use unordered lists to display text in no specific order.
When to consider alternatives
- If you need to communicate long lists of narrative text.
Usage
- Use sentence case and begin lists with a capital letter.
- Use punctuation appropriate to the text. Do not leave sentences without periods.
Accessibility
- When a list has a heading, consider adding an
idattribute to the heading element, and anaria-labelledbyattribute to the list element. Screen readers will then announce the heading text when users navigate to the list. - When using an unstyled list,
role="list"should be added to the list element. Safari will not recognize it as a list in the accessibility tree.