Interactive demo
This demo lets you preview the card component, its variations, and configuration options. Each tab displays a different type of card.
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
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.
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.
Behavior
Actions
Card collections
Theming
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
