Components Lists

Lists

Lists present multiple line items in a vertical arrangement as a single continuous element.

Usage Expand and collapse content An arrow that points down when collapsed and points up when expanded.

A list consists of a single continuous column of tessellated sub-divisions of equal width called rows that function as containers for tiles.

Tiles hold content, and can vary in height within a list.

List

Row and tile

Lists are best suited to presenting a homogeneous data type or sets of data types, such as images and text, optimized for reading comprehension with the goal of differentiating between like data types or qualities within a single data type.

If more than three lines of text need to be shown in list tiles, use cards instead.

If the primary distinguishing content consists of images, use a grid list.

Typical list scanning pattern

Content Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Tile content

List tiles present collections of related content in a consistent format, using hierarchy to enhance readability by prioritizing a consistent type or set of content. For example, in an email app, an inbox list emphasizes an avatar and text snippet over a time stamp. This helps users more easily find the most important information within the collection of content.

List tiles can contain up to three lines of text, and the amount of text can vary between tiles within the same list. To display more than three lines of text, use a card.

Bias the most distinguishing content in a tile towards the left of the tile. In tiles with mutli-line content, place the most distinguishing content in the first line.

Place the most distinguishing content on the left of the tile and the least distinguishing content on the right.

Tile actions

The majority of space on a list tile should be dedicated to the primary action.

Because actions are not distinguishing elements of list tiles, place supplemental actions on the right side of the tile.

Primary and supplemental actions, such as play, zoom in, delete, and select, are immediate and typically do not have a submenu of options (action overflow) within the list.

Actions can open a subsequent view, such as a card.

The primary action takes up the majority of the space on the tile. The supplemental action goes on the right side of the tile.

Primary actions:

  • Fill the entire tile, and therefore are not represented via icons, text, etc.
  • Are consistent throughout tiles in a specific list. For example, the primary action for all tiles in a single list of music would be to play a song, or in a list of emails, to open an email.

Supplemental actions:

  • Are represented in tiles with icons, secondary text, etc.
  • Are functionally consistent throughout tiles in a specific list, for example, an icon that indicates whether someone is online.
  • Are placed in a consistent location within the tiles of a specific list.

Avoid creating visual noise by repeatedly using supplemental actions in tiles, for example, by displaying a share action in every tile. Toggles, such as stars or pins, are exceptions because they provide meaningful information by displaying a state.

Behavior Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Scrolling

Lists scroll only vertically.

Gestures

Per-tile swipe actions should be consistent within lists.

Where appropriate, tiles can be moved between a list and a drop target (for example, moving a file into a folder) and picked up and manually reordered within a list.

Tile filtering and sorting

List tiles can be programmatically sorted or filtered by date, file size, alphabetical order, or other parameters.

Do.

Alphabetical sorting makes information easier to find.

Don't.

Don’t display information in random order; if the UI doesn’t allow the user to sort a list, your app should use a logical sort order.

Specs Expand and collapse content An arrow that points down when collapsed and points up when expanded.

In a single-line list, each tile contains a single line of text. The amount of text can vary between tiles within the same list.

Single-line list specs

Example of a single-line list

In a two-line list, each tile contains a maximum of two lines of text. The amount of text can vary between tiles within the same list.

Two-line list specs

Example of a two-line list

In a three-line list, each tile contains a maximum of three lines of text.

The amount of text can vary between tiles within the same list.

Three-line list specs

Example of a  three-line list

Single-line list

Text only

Font: Roboto Regular 16sp
Tile height: 48dp
Text padding, top: 16dp
Text padding, bottom: 20dp

Bottom padding is measured from the baseline.

Add 8dp padding at the top and bottom of a list. One exception is at the top of a list with a subheader, because subheaders contain their own padding.

Single-line list

Single-line list specs

Example of a single-line list

Icon with text

Font: Roboto Regular 16sp
Tile height: 48dp
Icon padding, left: 16dp
Text padding, left: 72dp
Text padding, top: 16dp
Text padding, bottom: 20dp

Bottom padding is measured from the baseline.

Add 8dp padding at the top and bottom of a list. One exception is at the top of a list with a subheader, because subheaders contain their own padding.

Single-line list with icon

Single-line list with icon

Example of single-line list with icon

Avatar with text

Font: Roboto Regular 16sp
Tile height: 56dp
Left avatar padding: 16dp
Text padding, left: 72dp
Text padding, top: 20dp
Text padding, bottom: 24dp

Bottom padding is measured from the baseline.

Add 8dp padding at the top and bottom of a list. One exception is at the top of a list with a subheader, because subheaders contain their own padding.

Single-line item with avatar

Single-line item with avatar specs

Example of a single-line item with avatar

Avatar with text and icon

Font: Roboto Regular 16sp
Tile height: 56dp
Left avatar padding: 16dp
Text padding, left: 72dp
Text padding, top: 20dp
Text padding, bottom: 24dp

Bottom padding is measured from the baseline.

Right icon padding: 16dp

Add 8dp padding at the top and bottom of a list. One exception is at the top of a list with a subheader, because subheaders contain their own padding.

Single-line item with avatar and icon

Single-line item with avatar and icon specs

Example of a single-line item with avatar and icon

Two-line list

Text only

Primary text font: Roboto Regular 16sp
Secondary text font: Roboto Regular 14sp
Tile height: 72dp
Text padding, left: 16dp
Text padding, top and bottom: 20dp

Bottom padding is measured from the baseline.

Add 8dp padding at the top and bottom of a list. One exception is at the top of a list with a subheader, because subheaders contain their own padding.

Two-line list

Two-line list specs:

Padding above title: 8dp
Left and right padding from screen edge: 16dp
Tile height: 72dp

Example of a two-line list

Icon with text

Primary text font: Roboto Regular 16sp
Secondary text font: Roboto Regular 14sp
Tile height: 72dp
Left icon padding: 16dp
Text padding, left: 72dp
Text padding, top and bottom: 20dp
Bottom padding is measured from the baseline.

Add 8dp padding at the top and bottom of a list. One exception is at the top of a list with a subheader, because subheaders contain their own padding.

Two-line list with icon

Two-line list with icon specs:

Tile height: 72dp
Icon left padding: 16dp
Text left padding: 72dp
Padding above list: 8dp
Text right padding: 16dp

Example of a two-line list with icon

Avatar with text

Primary text font: Roboto Regular 16sp
Secondary text font: Roboto Regular 14sp
Tile height: 72dp
Left avatar padding: 16dp
Text padding, left: 72dp
Text padding, top and bottom: 20dp

Bottom padding is measured from the baseline.

Center-align icon with text area.

Add 8dp padding at the top and bottom of a list. One exception is at the top of a list with a subheader, because subheaders contain their own padding.

Two-line list with avatar

Two-line list with avatar specs:

Tile height: 72dp
Icon left padding: 16dp
Text left padding: 72dp
Padding above list: 8dp
Text right padding: 16dp

Example of a two-line list with avatar

Avatar with text and icon

Primary text font: Roboto Regular 16sp
Secondary text font: Roboto Regular 14sp
Tile height: 72dp
Left avatar padding: 16dp
Text padding, left: 72dp
Text padding, top and bottom: 20dp

Bottom padding is measured from the baseline.

Right icon padding: 16dp

Add 8dp padding at the top and bottom of a list. One exception is at the top of a list with a subheader, because subheaders contain their own padding.

Avatar with text and icon

Keylines for an avatar with text and icon

Example of an avatar with text and icon

Three-line list

Text only

Primary text font: Roboto Regular 16sp

Secondary text font: Roboto Regular 14sp
Tile height: 88dp
Text padding, left: 16dp
Text padding, top: 16dp
Text padding, bottom: 20dp

Bottom padding is measured from the baseline.

Add 8dp padding at the top and bottom of a list. One exception is at the top of a list with a subheader, because subheaders contain their own padding.

Three-line list

Three-line list specs:

Tile height: 88dp
Text left padding: 16dp
Text right padding: 16dp
Padding above list: 8dp

Example of a three-line list

Icon with text

Primary text font: Roboto Regular 16sp
Secondary text font: Roboto Regular 14sp
Tile height: 88dp
Left icon padding: 16dp
Text left padding: 72dp
Text padding, top: 16dp
Text padding, bottom: 20dp

Bottom padding is measured from the baseline.

Top-align icon with primary text.

Add 8dp padding at the top and bottom of a list. One exception is at the top of a list with a subheader, because subheaders contain their own padding.

Three-line list with icon

Three-line list with icon specs:

Tile height: 88dp

Icon left padding: 16dp
Text left padding: 72dp
Text padding right: 16dp

Padding above list: 8dp

Example of a three-line list with icon

Avatar with text

Primary text font: Roboto Regular 16sp
Secondary text font: Roboto Regular 14sp
Tile height: 88dp
Left avatar padding: 16dp
Left text padding: 72dp
Text padding, top: 16dp
Text padding, bottom: 20dp

Bottom padding is measured from the baseline.

Top-align avatar with primary text.

Add 8dp padding at the top and bottom of a list. One exception is at the top of a list with a subheader, because subheaders contain their own padding.

Three-line list with avatar

Three-line list with avatar specs:

Tile height: 88dp
Padding above list: 8dp
Padding left of avatar: 16dp
Text left padding: 72dp
Text right padding: 16dp

Example of three-line list with avatar

Avatar with text and icon

Primary text font: Roboto Regular 16sp
Secondary text font: Roboto Regular 14sp
Tile height: 88dp
Left avatar padding: 16dp
Text left padding: 72dp
Text padding, top: 16dp
Text padding, bottom: 20dp

Bottom padding is measured from the baseline.

Right icon padding: 16dp

Top-align avatar and icon with primary text.

Add 8dp padding at the top and bottom of a list. One exception is at the top of a list with a subheader, because subheaders contain their own padding.

Three-line list with avatar and icon

Three-line list with avatar and icon specs:

Tile height: 88dp
Left avatar height: 16dp
Text left padding: 72dp
Padding above list: 8dp
Right right of icon: 16dp


Example of three-line list with avatar and icon