List

A list is a component that groups related content together, organized vertically. A list consists of a single continuous column of rows, with each row representing a list item. Each list item can contain primary and supplemental actions optimized for reading comprehension.

List is an effective, highly scannable component that works best to organize several related pieces of copy and content. The list allows for a horizontal configuration of content taking up less space than other components such as a card.

1. Pretitle (optional)
2. Headline
3. Supporting Text (optional)
4. Trailing Icon (optional)
5. Divider (optional)
6. Leading Image (optional)
7. Leading Icon (optional)

Pretitle (Optional)

• Can represent the category of the list item, such as a department name

Headline

• Subject of the list item

Supporting Text (Optional)

• This includes body copy and relevant additional information

• Keep content clear and concise in order to keep list items scannable.
• Order list items in logical ways (like alphabetical or numerical)
• Use lists to help users find a specific item and act on it
• Show icons, text, and actions in a consistent format