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...
Anatomy
Lists are optimized for reading comprehension. A list consists of a single continuous column of subdivisions called rows that contain items of 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.
A list control can display information and actions for list items.
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.
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.
Subheaders
Subheaders delineate sections of a list
Subheaders delineate sections of a list. They appear on list rows.
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).
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.
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.
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