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.
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 type of data.
If more than three lines of text needs to be shown in list tiles, use cards instead.
If the primary distinguishing content consists of images, use a grid list.
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, emphasizing an avatar and text snippet over a time stamp. This helps users more easily find the distinguishing information they are looking for 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 3 lines of text, use a card.
Bias the most distinguishing content in a tile towards the left side of the tile, and to the first line in a tile with multi-line content.
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-hand 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 or hovercard.
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 an exception because they provide meaningful information by displaying state.
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).
Where appropriate, tiles can be picked up and manually reordered within a list.
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.
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.
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.
Text only
Font: Roboto Regular 16 sp
Tile height: 48 dp
Text padding: 16 dp
Add 8 dp 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.
Icon with text
Font: Roboto Regular 16 sp
Tile height: 48 dp
Left icon padding: 16 dp
Text left padding: 72 dp
Text top and bottom padding: 16 dp
Add 8 dp 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
Font: Roboto Regular 16 sp
Tile height: 56 dp
Left avatar padding: 16 dp
Text left padding: 72 dp
Text top and bottom padding: 20 dp
Add 8 dp 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.
Text only
Primary text font: Roboto Regular 16 sp
Secondary text font: Roboto Regular 14 sp
Tile height: 72 dp
Text padding: 16 dp
Add 8 dp 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
Primary text font: Roboto Regular 16 sp
Secondary text font: Roboto Regular 14 sp
Tile height: 72 dp
Left avatar padding: 16 dp
Text left padding: 72 dp
Text top and bottom padding: 16 dp
Center-align icon with text area.
Add 8 dp 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
Primary text font: Roboto Regular 16 sp
Secondary text font: Roboto Regular 14 sp
Tile height: 72 dp
Left avatar padding: 16 dp
Text left padding: 72 dp
Text top and bottom padding: 16 dp
Right icon padding: 16 dp
Add 8 dp 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.
Text only
Primary text font: Roboto Regular 16 sp
Secondary text font: Roboto Regular 14 sp
Tile height: 88 dp
Text padding: 16 dp
Add 8 dp 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
Primary text font: Roboto Regular 16 sp
Secondary text font: Roboto Regular 14 sp
Tile height: 88 dp
Left avatar padding: 16 dp
Left text padding: 72 dp
Top-align avatar with primary text.
Add 8 dp 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
Primary text font: Roboto Regular 16 sp
Secondary text font: Roboto Regular 14 sp
Tile height: 88 dp
Left avatar padding: 16 dp
Text left padding: 72 dp
Text top and bottom padding: 16 dp
Right icon padding: 16 dp
Top-align avatar and icon with primary text.
Add 8 dp 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.
