List

Lists can be:

• Unordered, when the meaning of the list is not changed based on the order of the items
• Ordered, when the order of the list items matters for context to the user.
• Ordered Display List, when you need a visually enhanced numbered list to improve the scannability of sequential steps, instructions, or other content within a single screen.

Lists are a number of connected list items that are printed consecutively, typically one after the other. Lists can be ordered, using numbers as an indicator to the reader, or unordered with bullet points.

• Ordered lists are displayed with a preceding number.
• Unordered lists are displayed with a preceding bullet point.
• Ordered Display lists are displayed with a preceding visually enhanced number.
• Lists can be nested as deeply as needed, and they may alternate between ordered and unordered.
• Lists should align with the font-size, font-weight, and line-height of paragraphs, but are styled with bullets or numbers.
• Lists can have similar children elements as paragraphs to provide emphasis on a certain word or phrase.

Progress Steps

• Progress Steps show users an outline of a complex multi-step task across multiple pages or apps.
• Progress Steps convey progression and have interactive status states.

Ordered Display List

Ordered Display Lists structure tasks but don’t show progression or status through a multi-step task.

Timeline

• Timeline displays the history or sequence of events, focusing on what has happened over time.
• Use Timeline when user interaction is secondary, and progress does not depend on user actions since the process continues even without direct user input.

• ListItems should always have an OrderedList or UnorderedList parent component.
• Nested ListItems should be wrapped in their own, new OrderedList or UnorderedList parent component. For example:

<OrderedList>
  <ListItem>
    Text of the parent list item
    <OrderedList>
      <ListItem>Nested list item</ListItem>
    </OrderedList>
  </ListItem>
</OrderedList>

An unordered list is the default variant for List.

Use unordered lists to display a basic list of items related to a particular topic. Use Heading and/or body text preceding the list to introduce the linked topic.

Use ordered list to display a numbered list of items.

Use an Ordered Display List when you need a visually enhanced numbered list to improve the scannability of sequential steps, instructions, or other content within a single screen.

Keep the following guidance in mind when using this component:

• Choose a font size for list item labels that doesn't exceed the size of higher hierarchy levels on the page.
• For elements under the list item, avoid using text with a font size larger than the list item label.
• Keep list items labels concise, providing clear and actionable steps for the user to follow.

List items can be nested within other list items. To do so create a new list as a child to a ListItem.

The Ordered Display List is designed to convey hierarchy without influencing deeper levels. If your content requires more than 2 levels, use Headings to establish hierarchy before starting the list.

All elements under a list item should be included inside the list item, ensuring they share the same indentation.

Start each list item with the same part of speech, usually a noun or verb. This makes the list "parallel."

Do not use a period at the end of list items unless they are complete sentences. Do not use commas or ellipses at the end of list items.

Avoid listing very long lists. Where possible, make a big list into smaller ones with explanatory Headings.