components icon

List

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

Status

PublishedElement can be used in production
Adobe XD
Adobe XD Kit
In backlogElement is in backlog
PublishedElement can be used in production
Web Components
In backlogElement is in backlog
Angular
Angular
In backlogElement is in backlog
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

The parts of a list, labeled 1 through 2.
  1. Prefix: either a bullet or a number.
  2. List item: static text or links.