Interactive demo
This demo lets you preview the list component, its variations, and configuration options. Each tab displays a different type of list.
Usage
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.
Principles
Logical
Lists should be sorted in logical ways that make content easy to scan, such as alphabetical, numerical, chronological, or by user preference.
Actionable
Lists present content in a way that makes it easy to identify a specific item in a collection and act on it.
Consistent
Lists should present icons, text, and actions in a consistent format.
Types
Single-line list items contain a maximum of one line of text. Two-line list items contain a maximum of two lines of text. Three-line list items...
Single-line list items contain a maximum of one line of text.
2. Two-line list
Two-line list items contain a maximum of two lines of text.
3. Three-line list
Three-line list items contains a maximum of three lines of text.
Anatomy
Lists are optimized for reading comprehension. A list consists of a single continuous column of subdivisions called rows that contain items of content.
2. Row
3. List item content
Content types
Content types can take different forms, depending on the needs of a list. A list control can display information and actions for list items. A...
Content types can take different forms, depending on the needs of a list.
1. Supporting visuals
2. Primary text
3. Metadata
A list control can display information and actions for list items.
1. Supporting visuals
2. Primary text
3. List control
A list should be easily scannable, and any element of a list can be used to anchor and align list item content. Scannability is improved when elements (such as supporting visual and primary text) are placed in consistent locations across list items.
2. Content placement in a row
3. Supporting visuals are aligned for easy scanning
4. Primary text is aligned for easy scanning
Visuals, dividers, and spacing
The structure of a list can be clarified using visuals, dividers, and spacing
List structure can be organized using visuals, dividers, and spacing.
1. Primary Action area
2. Secondary Action area
1. More distinguishing content
2. Less distinguishing content
Subheaders
Subheaders delineate sections of a list
Subheaders delineate sections of a list. They appear on list rows.
A subheader should be left-aligned with an avatar or icon in a list.
2. Subheader inset
If a floating action button is aligned with list avatars or icons, the subheader should be aligned with the text content.
Behavior
Transitions
Tapping a list item expands it across the entire screen. Navigational transitions are movements between states in an app, such as from a high-level view...
Tapping a list item expands it across the entire screen using a container transform transition pattern.
Gestures
Swiping a list item (either left or right) can perform an action. Items can be dragged to reorder a list.
Swiping a list item (either left or right) can perform an action.
Items can be dragged to reorder a list.
Expand
A three-line list transition (on mobile) is displayed as a two-line list (on desktop).
A three-line list transition (on mobile) is displayed as a two-line list (on desktop).
1. A three-line list on mobile
2. A two-line list on desktop
Transform
On a larger screen, a list may transform into an image list.
On a larger screen, a list may transform into an image list.
2. An image list on desktop
Reveal additional content
Lists can also show more or less content as they scale up and down in size.
Lists can also show more or less content as they scale up and down in size. For example, a list item can reveal more content when the component expands.
Scaling and adaptation
Line length
Avoid excessively long lines of text when expanding containers and text-heavy components within fluid layouts. This often means changing margins and typography properties as the container scales.
The ideal line length for text is typically between 40-60 characters, but large screen devices can accommodate up to 120 characters per line. Consider increasing the line height to improve readability if a line of text becomes close to 120 characters in length.
Adapt the width of the list container based on a line’s length, or by switching to a multi-column layout.
Component adaptation
Visual presentation is the most common method of adaptation, affecting the scale and placement of content and objects on a screen, as well as their relationships to each other.
For example, a text list on mobile can adjust its margins, vertical spacing, or density to better fit large screens like tablets.
Component swapping
Given the flexibility needed for lists and cards to support multiple types of content, use caution if swapping between the two on large screens. As screen sizes increase, there are new opportunities for text and image compositions; in large screens you can use more space for images and text.
Composition
Lists and views
On smaller screens, lists extend edge-to-edge. Users navigate between full-screen views, as seen in a photo app’s transition from a thumbnail list to full image view.
Large screens can display primary and secondary content in the same view, such as a list adjacent to a detail view.
Types
Single-line list
Two-line list
In a two-line list, each row contains two lines of text maximum.
In a two-line list, each row contains two lines of text maximum.
Three-line list
List controls
List controls display information and actions for list items. A checkbox can either be a primary or secondary action. Show and hide details of existing...
List controls display information and actions for list items.
Checkbox
A checkbox can either be a primary or secondary action.
This checkbox is the list item’s secondary action.
2. Primary action
This checkbox is both the list item’s primary action and state indicator.
Expand and collapse
Show and hide details of existing list items by expanding and collapsing list content vertically.
Switch
Reorder
Theming
Basil Material theme
This recipe app's lists have been customized using Material Theming. Areas of customization include color and typography. Basil is a recipe app that uses Material...
This recipe app's lists have been customized using Material Theming. Areas of customization include color and typography.
Color
Basil's lists use custom color on four elements: the background, icon, item text, and quantity text.
Element | Category | Attribute | Value |
---|---|---|---|
Surface | Surface | Color Opacity |
#FFFBE6 100% |
Item text, Icons | Primary | Color Opacity |
#356859 100% |
Quantity text | On Surface | Color Opacity |
#29302E 100% |
Typography
Basil's lists use custom typography for item and quantity text.
Element | Category | Attribute | Value |
---|---|---|---|
Item text | Subtitle 1 | Typeface Font Size Case |
Lekton Bold 16 Title case |
Quantity text | Caption | Typeface Font Size Case |
Lekton Regular 12 Sentence case |
Crane Material theme
This travel app's lists have been customized using Material Theming. Areas of customization include color and typography. Crane is a travel app that uses Material...
This travel app's lists have been customized using Material Theming. Areas of customization include color and typography.
Typography
Crane's lists use custom typography for title and caption text.
Element | Category | Attribute | Value |
---|---|---|---|
Title text | Subtitle 1 | Typeface Font Size Case |
Raleway Medium 16 Title case |
Caption text | Caption | Typeface Font Size Case |
Raleway SemiBold 12 Title case |
Specs
One line
- 56 Measurement 56
- 56 Measurement 56
- 56 Measurement 56
- 8 Measurement 8
- 8 Measurement 8

- 56 Measurement 56
- 56 Measurement 56
- 56 Measurement 56
- 56 Measurement 56

Two line
- 64 Measurement 64
- 64 Measurement 64
- 72 Measurement 72
- 72 Measurement 72
- 72 Measurement 72
- 72 Measurement 72
- 16 Measurement 16
- 16 Measurement 16
- 24 Measurement 24
- 28 Measurement 28
- 16 Measurement 16
- 16 Measurement 16
- 16 Measurement 16
- 32 Measurement 32
- 16 Measurement 16
- 16 Measurement 16
- 16 Measurement 16
- 16 Measurement 16
- 16 Measurement 16
- 16 Measurement 16
- 8 Measurement 8
- 28 Measurement 28
- 20 Measurement 20
- 20 Measurement 20
- 24 Measurement 24
- 32 Measurement 32
- 20 Measurement 20
- 32 Measurement 32
- 20 Measurement 20
- 32 Measurement 32
- 24 Measurement 24
- 20 Measurement 20
- 24 Measurement 24
- 32 Measurement 32
- 20 Measurement 20
- 2424
- 4040
- 4040
- 10056
- 2424
- 2424
- 2424
#6200ee
R98 G0 B238
- Components open_in_new
Dividers

- 8 Measurement 8
- 8 Measurement 8
- 72 Measurement 72
- 72 Measurement 72
- 72 Measurement 72

Three line
- 16 Measurement 16
- 16 Measurement 16
- 88 Measurement 88
- 88 Measurement 88
- 88 Measurement 88
- 88 Measurement 88
- 88 Measurement 88
- 88 Measurement 88
- 16 Measurement 16
- 16 Measurement 16
- 16 Measurement 16
- 16 Measurement 16
- 16 Measurement 16
- 16 Measurement 16
- 32 Measurement 32
- 16 Measurement 16
- 20 Measurement 20
- 16 Measurement 16
- 16 Measurement 16
- 16 Measurement 16
- 20 Measurement 20
- 28 Measurement 28
- 28 Measurement 28
- 20 Measurement 20
- 28 Measurement 28
- 20 Measurement 20
- 28 Measurement 28
- 20 Measurement 20
- 28 Measurement 28
- 20 Measurement 20
- 16 Measurement 16
- 16 Measurement 16
- 16 Measurement 16
- 236 Measurement 236
- 28 Measurement 28
- 20 Measurement 20
- 2424
- 4040
- 10056
- 2424
- 4040
- Components open_in_new
Dividers

The trailing padding (padding to the right of the image) in the example above and below is intended to be 16dp.
- 88 Measurement 88
- 88 Measurement 88
- 88 Measurement 88
- 8 Measurement 8
- 8 Measurement 8

Collapsed & expanded
All measurements are displayed in device-independent pixels (dps)
- 48 Measurement 48
- 48 Measurement 48
- 48 Measurement 48
- 48 Measurement 48
- 72 Measurement 72
- 16 Measurement 16
- 32 Measurement 32
- 2424
