List
Lists present multiple line items vertically as a single continuous element. The types of lists are one-line and two-line.
When to use
Lists are a continuous group of text or images. They are composed of items containing primary and supplemental actions, which are represented by icons and text. It can be used to show a list of messages or subjects.
Alternatives and related components
Use cards if more than three lines of text need to be shown in list tiles.
Anatomy
The list consists of:
- Subheader: delineate sections of a list
- List item: the name of the list item
- Secondary text (optional): extra information about the list item
- Leading icon (optional): gives meaning to the list item
- Trailing icon (optional): represents a navigational element or an action an user can take
- Container: list item row
- List: contains all list items and the subheading
(Interactive) states
The checkbox contains the states active, inactive, hover and focus.
Design properties
Typography
- Subheader: TheSans/md/700
- List item: TheSans/md/400
- Secondary text: TheSans/s/400
Color
- Subheader: text color Grey/4
- List item: text color Grey/4
- Secondary text: text color Grey/4
- Leading icon: svg color Grey/4
- Trailing icon: svg color Grey/4
- Container: background-color white
Interactive states
- Active: list-item color Grey/4, container border 2px, container border color Blue/3
- Hover: list item text color Blue/3, trailing icon svg color Blue/3
- Focus: list item text color Blue/3, trailing icon svg color Blue/3, container border color Ocher/5
Structure
- Subheader: padding-top and padding-bottom 12px, padding-left and padding-right 16px
- List item: padding-top and padding-bottom 12px, padding-left and padding-right 16px
- Secondary text: padding-bottom 8px, padding-left and padding-right 16px
- Leading icon: height and width 24px, padding-top and padding-bottom 12px, padding-left 16px, padding-right 12px
- Trailing icon: height and width 24px, padding-top and padding-bottom 12px, padding-right 16px
- Container focus: container border 2px, dash 5,5
- Container one line: height 48px
- Container two lines: min-height 72px
- List: padding-top and padding-bottom 8px
Accessibility
[technical accessibility requirements]
Content guidelines
List items
Every item in a list should:
- Start with a capital letter
- Not use commas or semicolons at the end of each line
- Be written in sentence case
Best practices
Dos
Lists should:
- Have the most distinguishing content placed towards the left of the container
- Be sorted or filtered by date, file size, alphabetical order, or other parameters
- Avoid displaying a repeated supplemental action in containers, such as a share action in every container
- Break up chunks of related content to make the information easier for users to scan
- Be phrased consistently (try to start each item with a noun or a verb and be consistent with each item)
- Not be used for lists where the entire item represents an action
- Only use an icon if it adds clarity to the content or helps users visualize the meaning
- Erase the entire row if the 'delete' action is used
- Represent data structures in a scannable way and make them navigable
- Stay consistent with the action
Don’ts
Lists should:
- Not be used for displaying complex datasets. Consider using a table instead
- Not use the supporting visual to show the state or meta information
References
