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