List

The List component groups related content, organized vertically.

Developer Documentation

Information on how to implement this component is available for the following technologies.

Usage

  • Use ordered lists when the order of the list items is meaningful, i.e. they are sequential.
  • Use unordered lists when the order of the list items does not matter.

Guidelines

  • A List must use the default list style type (e.g. a bullet or number). Do not substitute the default with alternative symbols like Emoji.
  • A list should have at least 2 List Items.

Variants

Default

Default List can be ordered (with leading numbers) or unordered (with leading bullets).

Developer Documentation

Information on how to implement this component is available for the following technologies.

Developer Documentation

Information on how to implement this component is available for the following technologies.

Bare

Bare List can be ordered or unordered, but the leading symbol will not be visible and will not be read by screen readers.

Developer Documentation

Information on how to implement this component is available for the following technologies.

Indented

Indented List should be used when the list is between blocks of text.

Developer Documentation

Information on how to implement this component is available for the following technologies.

Accessibility

  • Unless you are using the Bare variant, screen readers will read “bullet” before each List Item in an unordered list or the number for an ordered list.