Skip to main content

List

Overview​

Lists should be sorted in logical ways that make content easy to scan.

They should make content actionable by making specific items easy to identify and act on.

List items may be spaced using dividers or spacing.

Image of a single line list spaced with white space.

List items may be separated by white space or dividers.

Image of a single line list spaced with white space.

1. List items may contain selection controls.
2. List items may contain icons and actions.

Use when​

  • Displaying groups of related items that are primarily textual.

Don't use when​

  • Displaying content that is not primarily text.
  • Displaying content with three or more well-defined dimensions that users might sort on. Instead, use a table.

Types​

There are three types of lists: 1. Single-line lists, 2. Two-line lists, 3. Three-line lists.

1. Single-line list​

Single-line list items contain a maximum of one line of text.

2. Two-line list​

Two-line list items contain a maximum of two lines of text.

3. Three-line list​

Three-line list items contains a maximum of three lines of text.

Components​

List items may contain

Use instead of a list

  • Use a table when displaying content with three or more well-defined dimensions that users might sort on.
  • Use cards when displaying content that has images or that contains non homogenous data.

Patterns​

Coming soon!