Lists

Lists are continuous, vertical indexes of text or images.

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

Lists are logical, actionable, consistent

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...

1. Single-line list

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.

1. List

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.

List items are comprised of three different content types:

1. Supporting visuals

2. Primary text

3. Metadata

A list control can display information and actions for list items.

Lists with controls contain three content types:

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.

Sample list
Content placement in a row
Supporting visuals are aligned for easy scanning
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.

Do.
Improve scannability by anchoring supporting visuals, such as thumbnails, along the row's edge.

Caution.
Placing supporting visuals in the center of the row can make it difficult to see the relationship between primary content and supporting content.

Do.
Place a divider between rows with lots of content, such as those with three-line lists.

Caution.
Distinguish rows by maintaining sufficient space between list items.

The primary action takes up the majority of space.
Primary Action area
Secondary Action area

Clear hierarchy is created by aligning the most distinguishing content on the left, with the least distinguishing on the right.
More distinguishing content
Less distinguishing content

Subheaders

Subheaders delineate sections of a list

Subheaders delineate sections of a list. They appear on list rows.

1. Subheader

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.

To expand a list item, display a parent-child transition.

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.

To archive a list item, swipe it.

Items can be dragged to reorder a list.

To reorder a list item, drag it.

Expand

A three-line list transition (on mobile) is displayed as a two-line list (on desktop).

Scaled down to 50%
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.

1. A one-line list on mobile
2. An image list on desktop

Types

Single-line list

Scaled down to 50% on desktop, a single-line list with icons and text

Two-line list

In a two-line list, each row contains two lines of text maximum.

A two-line list, with a thumbnail and meta text

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

Scaled down to 50% on desktop, a two-line list accompanied by an avatar and meta text

Three-line list

A three-line text list, with a thumbnail and meta text

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

On desktop, a three-line list accompanied by a large thumbnail and meta text

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.

Tapping the list control expands the list.

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 browsing app that demonstrates...

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

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

Specs

One line

16dp #000000de 16dp #000000de 16dp #000000de 16dp #000000de 16dp #000000de 16dp #000000de #6200ee R98 G0 B238 Elevation 0dp Dividers Dividers All measurements are displayed in...

Two line

16dp #000000de 12dp #00000099 14dp #00000099 10dp #00000099 16dp #000000de 16dp #000000de 14dp #00000099 16dp #000000de 14dp #00000099 16dp #000000de 14dp #00000099 16dp #000000de 14dp...

Three line

16dp #000000de 12dp #00000099 14dp #00000099 10dp #00000099 16dp #000000de 14dp #00000099 16dp #000000de 14dp #00000099 16dp #000000de 14dp #00000099 16dp #000000de 14dp #00000099 16dp...

Collapsed & expanded

All measurements are displayed in device-independent pixels (dps)

Implementation

Lists implementation support for each platform is indicated below.

Lists

Lists are continuous, vertical indexes of text or images.

Logical

Actionable

Consistent

1. Single-line list

2. Two-line list

3. Three-line list

1. List

2. Row

3. List item content

List items are comprised of three different content types:

1. Supporting visuals

2. Primary text

3. Metadata

Lists with controls contain three content types:

1. Supporting visuals

2. Primary text

3. List control

1. Subheader

2. Subheader inset

Checkbox

Expand and collapse

Switch

Reorder

Color

Typography

Typography

Android Material Component

IOS Material Component

Flutter Material Component

Web Material Component

Up next

Components

Menus

Components

Cards

Components

Image List