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

Read More

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

Read More

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

Read More

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.

  1. Sample list
  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

Read More

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.

  1. Primary Action area
  2. Secondary Action area

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

  1. More distinguishing content
  2. Less distinguishing content

Subheaders

Subheaders delineate sections of a list

Read More

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

Read More

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.

Read More

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

Read More

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.

Read More

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

A text list

A single-line list with icons and text

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.

Read More

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

A two-line list, with an icon and meta icon

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 with an avatar

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

Read More

List controls display information and actions for list items.

Checkbox

A checkbox can either be a primary or secondary action.

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

Tapping the list control expands the list.

An expanded list

Switch

Tapping the list control expands the list.

Reorder

Usually appearing in edit mode, dragging lists items moves them to other locations within the list. This reorder icon is the list item’s secondary action.


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

Read More

This recipe app’s lists have been customized using Material Theming. Areas of customization include color and typography.

Basil’s customized list

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

Read More

This travel app’s lists have been customized using Material Theming. Areas of customization include color and typography.

Crane’s customized list

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

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

Read More
  • 48
  • 48
  • 56
  • 56
  • 72
  • 72
  • 16
  • 16
  • 32
  • C
  • C
  • C
  • C
  • C
  • C
  • 16
  • 24
  • 12
  • 12
  • 16
  • 16
  • 24
  • 24
  • 24
  • 24
  • 16
  • 16
  • 16
  • 8
  • 8
  • 16
  • 16
  • 8
  • 8
  • 8
  • 8
  • 269
  • 244
  • 40 40
  • 100 56
  • 56 56
  • #6200ee

    R98 G0 B238

flip
flipSpecs only available at larger screen size

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

  • 56
  • 56
  • 56
  • 8
  • 8
flip
flipSpecs only available at larger screen size

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

  • 56
  • 56
  • 56
  • 56
flip
flipSpecs only available at larger screen size

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

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

Read More
  • 64
  • 64
  • 72
  • 72
  • 72
  • 72
  • 16
  • 16
  • 24
  • 28
  • 16
  • 16
  • 16
  • 32
  • 16
  • 16
  • 16
  • 16
  • 16
  • 16
  • 8
  • 28
  • 20
  • 20
  • 24
  • 32
  • 20
  • 32
  • 20
  • 32
  • 24
  • 20
  • 24
  • 32
  • 20
  • 24 24
  • 40 40
  • 40 40
  • 100 56
  • 24 24
  • 24 24
  • 24 24
  • #6200ee

    R98 G0 B238

flip
flipSpecs only available at larger screen size

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

  • 8
  • 8
  • 72
  • 72
  • 72
flip
flipSpecs only available at larger screen size

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

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

Read More
  • 16
  • 16
  • 88
  • 88
  • 88
  • 88
  • 88
  • 88
  • 16
  • 16
  • 16
  • 16
  • 16
  • 16
  • 32
  • 16
  • 20
  • 16
  • 16
  • 16
  • 20
  • 28
  • 28
  • 20
  • 28
  • 20
  • 28
  • 20
  • 28
  • 20
  • 16
  • 16
  • 16
  • 236
  • 28
  • 20
  • 24 24
  • 40 40
  • 100 56
  • 24 24
  • 40 40
flip
flipSpecs only available at larger screen size

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

  • 88
  • 88
  • 88
  • 8
  • 8
flip
flipSpecs only available at larger screen size

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

Collapsed & expanded

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

Read More
  • 48
  • 48
  • 48
  • 48
  • 72
  • 16
  • 32
  • 24 24
flip
flipSpecs only available at larger screen size

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


Implementation

Lists implementation support for each platform is indicated below.

IOS Material Component

Status: Documentation Planned

Flutter Material Component

Status: Code Available

Web Material Component

Status: Under Development