Cards

Cards contain content and actions about a single subject.


Usage

Cards are surfaces that display content and actions on a single topic.

They should be easy to scan for relevant and actionable information. Elements, like text and images, should be placed on them in a way that clearly indicates hierarchy.

Principles

Cards are contained, independent, and inseparable.

Read More

Contained

A card is identifiable as a single, contained unit.

Independent

A card can stand alone, without relying on surrounding elements for context.

Individual

A card cannot merge with another card, or divide into multiple cards.


Anatomy

The card container is the only required element in a card. All other elements shown here are optional.

Card layouts can vary to support the types of content they contain. The following elements are commonly found among that variety.

1. Container

Card containers hold all card elements, and their size is determined by the space those elements occupy. Card elevation is expressed by the container.

2. Thumbnail [optional]

Cards can include thumbnails to display an avatar, logo, or icon.

3. Header text [optional]

Header text can include things like the name of a photo album or article.

4. Subhead [optional]

Subhead text can include text elements such as an article byline or a tagged location.

5. Media [optional]

Cards can include a variety of media, including photos, and graphics, such as weather icons.

6. Supporting text [optional]

Supporting text include text like an article summary or a restaurant description.

7. Buttons [optional]

Cards can include buttons for actions.

8. Icons [optional]

Cards can include icons for actions.

Each card is made up of content blocks. All of the blocks, as a whole, are related to a single subject or destination. Content can receive different levels of emphasis, depending on its level of hierarchy.

Cards contain rich media, primary title, supporting text, and actions.

Dividers

Dividers can be used to separate regions in cards or to indicate areas of a card that can expand. A divider is a thin, lightweight...

Read More

Dividers can be used to separate regions in cards or to indicate areas of a card that can expand.

Use inset dividers (1), dividers that do not run the full length of a card, to separate related content.

Content that can be expanded should use full-width dividers.


Behavior

Transitions

Cards can transform to reveal additional content. Transition choreography is a coordinated sequence of motion that maintains user focus as the interface adapts. Related Article...

Read More

Cards can transform to reveal additional content.

A card expands to fill the full screen using a parent-child transition.

Do.

Expand a card to reveal information.

Don’t.

Cards don’t flip over to reveal information.

Elevation

On mobile, a card’s default elevation is 1dp, with a raised elevation of 8dp. On desktop and mobile, cards can have a resting elevation of...

Read More

On mobile, a card’s default elevation is 1dp, with a raised elevation of 8dp.

A shadow helps indicate a card.

On desktop and mobile, cards can have a resting elevation of 0dp. They elevate to 8dp on hover.

A stroke of 0dp helps indicate a card.

Gestures

Gestures should be implemented consistently within a card collection. Frequently used gestures on cards include swipe, pick up and move, and scrolling. A swipe gesture...

Read More

Gestures should be implemented consistently within a card collection. Frequently used gestures on cards include swipe, pick up and move, and scrolling.

Swipe

A swipe gesture can be performed on a single card at a time, anywhere on that card.

It can be used to:

  • Dismiss a card
  • Change the state of a card (such as flagging or archiving it)

Do.

A card should only have one swipe action assigned to it.

Don’t.

Cards should not contain swipeable content (such as an image carousel or pagination). Swipe gestures should also not cause portions of cards to detach upon swipe.

Pick up and move

The pick up and move gesture allows users to move and re-order cards in a collection.

Do.

When moving a card, increase its elevation.

Don’t.

Don’t move cards behind other cards.

Don’t.

Don’t let cards bump other elements out of the way. When a card is picked up, it appears in front of all elements (except app bars and navigation).

Scrolling

Card content that is taller than the maximum card height is truncated and does not scroll, but can be displayed by expanding the height of a card. A card can expand beyond the maximum height of the screen, in which case the card scrolls within the screen.

Do.

On mobile, cards can expand to reveal more content, scrolling within the screen. Content within cards doesn’t scroll.

Don’t.

On mobile, cards cannot internally scroll, as it could cause two scroll bars to be displayed.

Do.

On desktop, card content can expand and scroll within a card.


Actions

Primary action

The primary action area of a card is typically the card itself. Often cards are one large touch target to a detail screen on a...

Read More

The primary action area of a card is typically the card itself. Often cards are one large touch target to a detail screen on a subject.

The action area of a card contains rich media and supporting text.

Supplemental actions

Supplemental actions are represented by icons, text, and UI controls on cards. They are typically placed at the bottom of the card. For more than...

Read More

Supplemental actions are represented by icons, text, and UI controls on cards. They are typically placed at the bottom of the card.

For more than two supplemental actions, use an overflow menu instead.

Supplemental text and actions at the bottom of the card

Overflow menu

Overflow menus contain related actions. They are typically placed in the upper-right or lower-right corner of a card.

Read More

Overflow menus contain related actions. They are typically placed in the upper-right or lower-right corner of a card.

Overflow menus are usually located in the upper-right or lower-right corner of a card.

UI controls

UI controls can be included within a card to allow the user to interact with a card’s content. UI controls may be in the form...

Read More

UI controls can be included within a card to allow the user to interact with a card’s content. UI controls may be in the form of a slider, stars to rate content, chips, or buttons.

This card contains stars to rate content.

This card contains choice chips within the action area.

This card contains a slider control within the action area.

Additional actions

Cards can support multiple actions, such as UI controls and an overflow menu. Because cards are entry points to more detailed information, they should contain...

Read More

Cards can support multiple actions, such as UI controls and an overflow menu. Because cards are entry points to more detailed information, they should contain a limited number of actions.

Caution.

Cards provide entry to more robust information. Be cautious not to overload cards with extraneous information or actions.

Focus

When traversing through focus points on a card, visit each focused element before moving to the next card. For users that navigate solely using focus...

Read More

When traversing through focus points on a card, visit each focused element before moving to the next card.

For users that navigate solely using focus traversal (using a D-pad and keyboard), cards should have either a primary action or open a new screen containing primary and supplemental actions.

Focus traversal of a card


Card collections

Usage

When multiple cards are present, they are grouped together into one or more collections. By default, cards in a collection are coplanar, sharing the same...

Read More

When multiple cards are present, they are grouped together into one or more collections. By default, cards in a collection are coplanar, sharing the same resting elevation unless they are picked up or dragged.

Layout

Organize card collections in a way that makes cards useful. How cards are laid out affects how they are perceived and used.

Read More

Organize card collections so that they are easy to use. Their layout affects how they are perceived.

When adding cards to a collection, the first item is automatically positioned on the top left. Subsequent cards are laid out left to right, top to bottom.

Scannable

To make a collection of cards scannable, place them in a consistent pattern.

Scannable cards

Dashboard

To display multiple subject matters and functions on a screen, use a dashboard-style card collection.

Dashboard-style card collection

Distinction

To highlight each card’s individuality, style, or novelty, use a card collection with an asymmetric grid.

Cards in an asymmetric grid

Contained collections

Card collections can be placed within a container, and be scrolled within it.

Read More

Card collections can be placed within a container, and be scrolled within it.

Do.

A card collection can horizontally scroll within a container.

Don’t.

The container for a collection should not be a card, and the entire surface area of the container should not be interactive.

Filtering and sorting

Card collections can be filtered in a variety of ways, including by date or alphabetical order. If a collection can be filtered, the filter must...

Read More

Card collections can be filtered in a variety of ways, including by date or alphabetical order. If a collection can be filtered, the filter must apply to each card in the collection.

Filter or sorting options should be placed outside of the card collection.


Theming

Owl Material theme

This educational app’s cards have been customized using Material Theming. Areas of customization include color, typography, and shape. Owl is an educational app that provides...

Read More

This educational app’s cards have been customized using Material Theming. Areas of customization include color, typography, and shape.

Owl’s customized cards

Color

Owl’s cards use custom color on three elements: the container, text, and icon.

Element

Category

Attribute

Value

Container

Background

Color

Opacity

#0336FF

100%

Text, Icons

On Background

Color

Opacity

#FFFFFF

100%

Typography

Owl’s cards use custom typography for the card title, number, and category text.

Element

Category

Attribute

Value

Title

Subtitle 1

Typeface

Font

Size

Case

Rubik

Medium

16

Title case

Number

Subtitle 2

Typeface

Font

Size

Case

Rubik

Medium

14

Title case

Category

Overline

Typeface

Font

Size

Case

Rubik

Regular

10

All caps

Shape

Owl’s cards use a custom container shape, with a 0dp corner radius.

Element

Category

Attribute

Value

Container

Medium component

Family

Size

Rounded

0dp; 0dp; 0dp; 0dp

Reply Material theme

This email app’s cards have been customized using Material Theming. Areas of customization include color, typography, and shape. Reply is an email app that uses...

Read More

This email app’s cards have been customized using Material Theming. Areas of customization include color, typography, and shape.

Reply’s customized card

Color

Reply’s cards use custom color on six elements: the container, metadata text, title text, body text, icon, and icon fill.

Element

Category

Attribute

Value

Container

Surface

Color

Opacity

#FFFFFF

100%

Metadata text

On Secondary

Color

Opacity

#232F34

100%

Title text

On Secondary

Color

Opacity

#232F34

100%

Body text

On Secondary

Color

Opacity

#232F34

100%

Icon

On Secondary

Color

Opacity

#232F34

100%

Icon fill

On Secondary

Color

Opacity

#232F34

30%

Typography

Reply’s cards use custom typography for the card title, body, and metadata text.

Element

Category

Attribute

Value

Title

H6

Typeface

Font

Size

Case

Work Sans

Bold

21

Sentence case

Body

Body 1

Typeface

Font

Size

Case

Work Sans

Regular

17

Sentence case

Metadata

Body 2

Typeface

Font

Size

Case

Work Sans

Regular

15

Sentence case

Shape

Reply’s cards use a custom container shape, with a 0dp corner radius.

Element

Category

Attribute

Value

Container

Medium component

Family

Size

Rounded

0dp; 0dp; 0dp; 0dp;


Specs

This section should not be read as prescriptive or exhaustive. Cards have no singular layout, typographic, or image size. All cards should be designed to meet the needs of the content they present. This section shows a variety of card layouts to help showcase that variety.

Elevated cards

  • Measurement 148
  • Measurement 344
  • Measurement 16
  • Measurement 8
  • Measurement 16
  • Measurement 16
  • Measurement 16
  • Measurement 28
  • Measurement 8
  • Measurement 40
  • 8080
  • Measurement 382
  • Measurement 344
  • Measurement 16
  • Measurement 72
  • Measurement 72
  • Measurement 116
  • Measurement 34
  • Measurement 22
  • Measurement 28
  • Measurement 8
  • Measurement 8
  • Measurement 24
  • 344194
  • 4040
  • Measurement 510
  • Measurement 194
  • Measurement 0
  • Measurement 344
  • Measurement 32
  • Measurement 26
  • Measurement 36
  • Measurement 1
  • Measurement 24
  • Measurement 14
  • Measurement 20
  • Measurement 16
  • Measurement 24
  • Measurement 32
  • Measurement 8
  • Measurement 8
  • Measurement 44
  • Measurement 24

Outlined cards

  • Measurement 40
  • Measurement 24
  • Measurement 24
  • Measurement 16
  • Measurement 16
  • Measurement 16
  • Measurement 8
  • Measurement 8
  • Measurement 16
  • Measurement 1
  • 8080

Implementation

Cards implementation support for each platform is indicated below.

Android Material Component

Status: Code Available

IOS Material Component

Status: Code Available

Flutter Material Component

Status: Code Available

Web Material Component

Status: Code Available