Cards are constructed using blocks of content which include:
- An optional header
- A primary title
- Rich media
- Supporting text
- Actions
These content blocks can be combined to create visual hierarchy within a card.
Primary title top padding: 24dp
Primary title bottom padding: 16dp
Action button row padding: 8dp
Supporting text top padding: 16dp
Supporting text bottom padding: 24dp
Content block types
Rich media
16:9 or 1:1 aspect ratio (recommended)
Actions
Padding: 8dp
Primary title/text
Title: 24sp or 14sp
Subtitle: 14sp
Left and right padding: 16dp
Top padding: 16dp or 24dp (when a large primary title is present)
Bottom padding: 16dp (if there are additional actions or supporting text) or 24dp (no actions or supporting text)
Supporting text
Supporting text: 14sp
Left and right padding: 16dp
Top padding: 16dp
Bottom padding: 24dp (16dp if there are additional actions or text below)
Bullet points (but not their text), images, and buttons may extend outside of the 16dp padding.
Card margins on mobile
Padding from edge of screen to card: 8dp
Space between cards: 8dp
Elevation
Card resting elevation: 2dp
Card raised elevation: 8dp
Content block combinations
The following examples illustrate some possible combinations of content blocks.
Media area
- 16:9 ratio
Supporting text
- Text: 14sp
- Padding: 16dp
Avatar, Title, and Subtitle area
- 72dp
Media area
- 16:9 ratio
Supporting text
- Text: 14sp
- Padding: 16dp
Actions
- Padding: 8dp
Avatar, Title, and Subtitle area
- 72dp
Media area
- 16:9 ratio
Actions
- Padding: 8dp
- Padding between actions: 4dp
Media area
- 16:9 ratio
Primary text
- Text: 24sp
- Top padding: 24dp
- Bottom padding: 16dp
Subtext
- Text: 14sp
- Bottom padding: 16dp
Actions
- Padding: 8dp
Media area
- 16:9 ratio
Primary text
- Text: 24sp
- Top padding: 24dp
- Bottom padding: 16dp
Subtext
- Text: 14sp
- Bottom padding: 16dp
Actions
- Padding: 8dp
Expanded supporting text
- Text: 14sp
- Top padding: 16dp
- Bottom padding: 24dp
Primary text
- Text: 24sp
- Top padding: 24dp
- Bottom padding: 16dp
Subtitle
- Top padding: 12dp
Subtext
- Text: 14sp
- Bottom padding: 16dp
Supporting text
- Text: 14sp
- Top padding: 16dp
- Bottom padding: 16dp
Actions
- Padding: 8dp
Media area
- 16:9 ratio
Actions
- Padding: 8dp
Media area
- 1:1 ratio
Primary text
- Text: 24sp
- Top padding: 24dp
Subtext
- Text: 14sp
- Bottom padding: 16dp
Actions
- Padding: 8dp
Media area
- 1:1 ratio
Primary text
- Text: 24sp
Actions
- Padding: 8dp
Media area
- 1x
- Top padding: 16dp
Primary text
- Text: 24sp
- Top padding: 24dp
Subtext
- Text: 14sp
Actions
- Padding: 8dp
Media area
- 3/8x
- Top padding: 16dp
Primary text
- Text: 24sp
- Top padding: 24dp
Subtext
- Text: 14sp
Actions
- Padding: 8dp
Media area
- 2x
- Top padding: 16dp
Primary text
- Text: 24sp
- Top padding: 24dp
Subtext
- Text: 14sp
Actions
- Padding: 8dp
Media area
- 3x
- Padding: 16dp
Actions
- All around padding: 8dp + 16dp
