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.
Icon left padding: 16dp
List item left padding: 72dp
List right padding: 16dp
List right margin: 56dp
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.
Icon left padding: 16dp
List item left padding: 72dp
List right padding: 16dp
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.
Icon left padding: 16dp
List item left padding: 72dp
List right padding: 16dp
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
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
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
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
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
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
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
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