List

Lists are used to organize a group of related text elements.

Status

PublishedElement can be used in production
PublishedElement can be used in production
Angular
Angular
PublishedElement can be used in production
React
React
In backlogElement is in backlog
Documentation
In progressElement design and development in progress

What's new

List was previously named “Lists.” This component has been redesigned to the updated font ramp and color palette, in addition to accessibility enhancements, and now includes two text styles.

When to use

List and table are not used for the same purpose. Identifying the right use case will make the experience clear for all users, particularly for those with cognitive and learning disabilities, or those using screen readers.

ComponentUse case
ListA list presents a group of related information in a scannable format.
TableA table displays complex groups of information for the purpose of reference, comparison, or choice.

Anatomy

  1. Prefix: either a bullet or a number.
  2. List item: static text or links.

Articles

Bulleted lists article

Read the Nielsen Norman Group's article on lists in digital content.