List
A list is a set of text objects in a bulleted, numbered or icon format.
Breakdown
Ordered list
A standard numerical list.
- This is a basic numerical list
- This is a basic numerical list
- This is a basic numerical list
- This is a basic numerical list
Unordered list
A bulleted list.
- This is a basic bullet list
- This is a basic bullet list
- This is a basic bullet list
- This is a basic bullet list
List element (number)
- 1 Decorative list item
- 2 Decorative list item
- 3 Decorative list item
List element (icon)
- Decorative list item
- Decorative list item
- Decorative list item
Usage
Lists are a number of connected items that follow one another consecutively. Lists can be ordered, using numbers as an indicator to the reader, or unordered with bullet points.
- Ordered lists are displayed with a number.
- Unordered lists are displayed with a bullet point.
- Ordered display lists are displayed with a visually styled number.
- Icon display lists use display list styling, icons remain contained within a box.
- Lists are formatted using paragraph styling.
- Lists can have similar children elements as paragraphs to provide emphasis on a certain word or phrase.
Listing
Use a list when you are displaying more than two items. Do not use a list when displaying fewer than two items and instead try to enter the information as plain text.
Nesting
List items can be nested within other types of lists.
Accessibility
You should use a label prop in all lists. The label will be announced by assertive technologies such as a screenreader. This device describing the purpose or contents of the list.
