---
url: /components/cards/specs.md
description: Cards display content and actions about a single subject.
---

# Cards

Cards display content and actions about a single subject.

[Overview](overview.md) · **Specs** · [Guidelines](guidelines.md) · [Accessibility](accessibility.md)

## Tokens & specs

Select a component variant below to see its elements, attributes, tokens, and their values.

::: token-table token-table-100ebfb4332adab1-d1885652
**Cards tokens** · 3 token sets · 81 tokens · [live token table](https://m3.material.io/components/cards/specs) · DSDB `TOKEN_TABLE.100ebfb4332adab1`

* Default context: Theme: Light · Platform: Android · Audience: 3P · Contrast: Default · iOS dark theme elevation: None · iOS weight setting: Default
* Not configurable here (group default used): Motion scheme: Standard · Font: Static · Language height: Small
* Other contexts: Theme: Dark · Contrast: Medium contrast, High contrast. "Other contexts" lists values that differ from the default when only that one context changes.
* Reference chain: aliases from the token to its source value (`token → alias → … → value`). "—" means the token holds a literal value.

**Card - Elevated** · `md.comp.elevated-card` · 25 tokens

For elevated cards.

| Group | Token | Type | Reference chain | Resolved value | Other contexts |
| --- | --- | --- | --- | --- | --- |
| Enabled › Container | `md.comp.elevated-card.container.color` | Color | `md.sys.color.surface-container-low` → `md.ref.palette.neutral96` | `#F7F2FA` | Dark: `#1D1B20` via `md.ref.palette.neutral10` |
| Enabled › Container | `md.comp.elevated-card.container.elevation` | Elevation | `md.sys.elevation.level1` | `1dp` | — |
| Enabled › Container | `md.comp.elevated-card.container.surface-tint-layer.color` (deprecated) | Color | `md.sys.color.surface-tint` → `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`<br>Medium contrast: `#4F378B` via `md.ref.palette.primary30`<br>High contrast: `#381E72` via `md.ref.palette.primary20` |
| Enabled › Container | `md.comp.elevated-card.container.shape` | Shape | `md.sys.shape.corner.medium` | `Rounded corners 12dp` | — |
| Enabled › Container | `md.comp.elevated-card.container.shadow-color` | Color | `md.sys.color.shadow` → `md.ref.palette.neutral0` | `#000000` | — |
| Enabled › Icon | `md.comp.elevated-card.icon.color` | Color | `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`<br>Medium contrast: `#4F378B` via `md.ref.palette.primary30`<br>High contrast: `#381E72` via `md.ref.palette.primary20` |
| Enabled › Icon | `md.comp.elevated-card.icon.size` | Length | — | `24dp` | — |
| Disabled › Container | `md.comp.elevated-card.disabled.container.elevation` | Elevation | `md.sys.elevation.level1` | `1dp` | — |
| Disabled › Container | `md.comp.elevated-card.disabled.container.opacity` | Opacity | — | `0.38` | — |
| Disabled › Container | `md.comp.elevated-card.disabled.container.color` | Color | `md.sys.color.surface` → `md.ref.palette.neutral98` | `#FEF7FF` | Dark: `#141218` via `md.ref.palette.neutral6` |
| Hovered › Container | `md.comp.elevated-card.hover.container.elevation` | Elevation | `md.sys.elevation.level2` | `3dp` | — |
| Hovered › State layer | `md.comp.elevated-card.hover.state-layer.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Hovered › State layer | `md.comp.elevated-card.hover.state-layer.opacity` | Opacity | `md.sys.state.hover.state-layer-opacity` | `0.08` | — |
| Focused › Container | `md.comp.elevated-card.focus.container.elevation` | Elevation | `md.sys.elevation.level1` | `1dp` | — |
| Focused › State layer | `md.comp.elevated-card.focus.state-layer.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Focused › State layer | `md.comp.elevated-card.focus.state-layer.opacity` | Opacity | `md.sys.state.focus.state-layer-opacity` | `0.1` | — |
| Focused › Focus indicator | `md.comp.elevated-card.focus.indicator.color` | Color | `md.sys.color.secondary` → `md.ref.palette.secondary40` | `#625B71` | Dark: `#CCC2DC` via `md.ref.palette.secondary80`<br>Medium contrast: `#4A4458` via `md.ref.palette.secondary30`<br>High contrast: `#332D41` via `md.ref.palette.secondary20` |
| Focused › Focus indicator | `md.comp.elevated-card.focus.indicator.thickness` | Length | `md.sys.state.focus-indicator.thickness` | `3dp` | — |
| Focused › Focus indicator | `md.comp.elevated-card.focus.indicator.outline.offset` | Length | `md.sys.state.focus-indicator.outer-offset` | `2dp` | — |
| Pressed (ripple) › Container | `md.comp.elevated-card.pressed.container.elevation` | Elevation | `md.sys.elevation.level1` | `1dp` | — |
| Pressed (ripple) › State layer | `md.comp.elevated-card.pressed.state-layer.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Pressed (ripple) › State layer | `md.comp.elevated-card.pressed.state-layer.opacity` | Opacity | `md.sys.state.pressed.state-layer-opacity` | `0.1` | — |
| Dragged › Container | `md.comp.elevated-card.dragged.container.elevation` | Elevation | `md.sys.elevation.level4` | `8dp` | — |
| Dragged › State layer | `md.comp.elevated-card.dragged.state-layer.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Dragged › State layer | `md.comp.elevated-card.dragged.state-layer.opacity` | Opacity | `md.sys.state.dragged.state-layer-opacity` | `0.16` | — |

**Card - Filled** · `md.comp.filled-card` · 25 tokens

For filled cards.

| Group | Token | Type | Reference chain | Resolved value | Other contexts |
| --- | --- | --- | --- | --- | --- |
| Enabled › Container | `md.comp.filled-card.container.color` | Color | `md.sys.color.surface-container-highest` → `md.ref.palette.neutral90` | `#E6E0E9` | Dark: `#36343B` via `md.ref.palette.neutral22` |
| Enabled › Container | `md.comp.filled-card.container.elevation` | Elevation | `md.sys.elevation.level0` | `0dp` | — |
| Enabled › Container | `md.comp.filled-card.container.shape` | Shape | `md.sys.shape.corner.medium` | `Rounded corners 12dp` | — |
| Enabled › Container | `md.comp.filled-card.container.shadow-color` | Color | `md.sys.color.shadow` → `md.ref.palette.neutral0` | `#000000` | — |
| Enabled › Container | `md.comp.filled-card.container.surface-tint-layer.color` (deprecated) | Color | `md.sys.color.surface-tint` → `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`<br>Medium contrast: `#4F378B` via `md.ref.palette.primary30`<br>High contrast: `#381E72` via `md.ref.palette.primary20` |
| Enabled › Icon | `md.comp.filled-card.icon.color` | Color | `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`<br>Medium contrast: `#4F378B` via `md.ref.palette.primary30`<br>High contrast: `#381E72` via `md.ref.palette.primary20` |
| Enabled › Icon | `md.comp.filled-card.icon.size` | Length | — | `24dp` | — |
| Disabled › Container | `md.comp.filled-card.disabled.container.elevation` | Elevation | `md.sys.elevation.level0` | `0dp` | — |
| Disabled › Container | `md.comp.filled-card.disabled.container.opacity` | Opacity | — | `0.38` | — |
| Disabled › Container | `md.comp.filled-card.disabled.container.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Hovered › Container | `md.comp.filled-card.hover.container.elevation` | Elevation | `md.sys.elevation.level1` | `1dp` | — |
| Hovered › State layer | `md.comp.filled-card.hover.state-layer.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Hovered › State layer | `md.comp.filled-card.hover.state-layer.opacity` | Opacity | `md.sys.state.hover.state-layer-opacity` | `0.08` | — |
| Focused › Container | `md.comp.filled-card.focus.container.elevation` | Elevation | `md.sys.elevation.level0` | `0dp` | — |
| Focused › State layer | `md.comp.filled-card.focus.state-layer.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Focused › State layer | `md.comp.filled-card.focus.state-layer.opacity` | Opacity | `md.sys.state.focus.state-layer-opacity` | `0.1` | — |
| Focused › Focus indicator | `md.comp.filled-card.focus.indicator.color` | Color | `md.sys.color.secondary` → `md.ref.palette.secondary40` | `#625B71` | Dark: `#CCC2DC` via `md.ref.palette.secondary80`<br>Medium contrast: `#4A4458` via `md.ref.palette.secondary30`<br>High contrast: `#332D41` via `md.ref.palette.secondary20` |
| Focused › Focus indicator | `md.comp.filled-card.focus.indicator.thickness` | Length | `md.sys.state.focus-indicator.thickness` | `3dp` | — |
| Focused › Focus indicator | `md.comp.filled-card.focus.indicator.outline.offset` | Length | `md.sys.state.focus-indicator.outer-offset` | `2dp` | — |
| Pressed (ripple) › Container | `md.comp.filled-card.pressed.container.elevation` | Elevation | `md.sys.elevation.level0` | `0dp` | — |
| Pressed (ripple) › State layer | `md.comp.filled-card.pressed.state-layer.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Pressed (ripple) › State layer | `md.comp.filled-card.pressed.state-layer.opacity` | Opacity | `md.sys.state.pressed.state-layer-opacity` | `0.1` | — |
| Dragged › Container | `md.comp.filled-card.dragged.container.elevation` | Elevation | `md.sys.elevation.level3` | `6dp` | — |
| Dragged › State layer | `md.comp.filled-card.dragged.state-layer.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Dragged › State layer | `md.comp.filled-card.dragged.state-layer.opacity` | Opacity | `md.sys.state.dragged.state-layer-opacity` | `0.16` | — |

**Card - Outlined** · `md.comp.outlined-card` · 31 tokens

For outlined cards.

| Group | Token | Type | Reference chain | Resolved value | Other contexts |
| --- | --- | --- | --- | --- | --- |
| Enabled › Container | `md.comp.outlined-card.container.color` | Color | `md.sys.color.surface` → `md.ref.palette.neutral98` | `#FEF7FF` | Dark: `#141218` via `md.ref.palette.neutral6` |
| Enabled › Container | `md.comp.outlined-card.container.elevation` | Elevation | `md.sys.elevation.level0` | `0dp` | — |
| Enabled › Container | `md.comp.outlined-card.container.surface-tint-layer.color` (deprecated) | Color | `md.sys.color.surface-tint` → `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`<br>Medium contrast: `#4F378B` via `md.ref.palette.primary30`<br>High contrast: `#381E72` via `md.ref.palette.primary20` |
| Enabled › Container | `md.comp.outlined-card.container.shape` | Shape | `md.sys.shape.corner.medium` | `Rounded corners 12dp` | — |
| Enabled › Outline | `md.comp.outlined-card.container.shadow-color` | Color | `md.sys.color.shadow` → `md.ref.palette.neutral0` | `#000000` | — |
| Enabled › Outline | `md.comp.outlined-card.outline.width` | Length | — | `1dp` | — |
| Enabled › Outline | `md.comp.outlined-card.outline.color` | Color | `md.sys.color.outline-variant` → `md.ref.palette.neutral-variant80` | `#CAC4D0` | Dark: `#49454F` via `md.ref.palette.neutral-variant30`<br>Medium contrast: `#79747E` via `md.ref.palette.neutral-variant50`<br>High contrast: `#49454F` via `md.ref.palette.neutral-variant30` |
| Enabled › Icon | `md.comp.outlined-card.icon.color` | Color | `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`<br>Medium contrast: `#4F378B` via `md.ref.palette.primary30`<br>High contrast: `#381E72` via `md.ref.palette.primary20` |
| Enabled › Icon | `md.comp.outlined-card.icon.size` | Length | — | `24dp` | — |
| Disabled › Container | `md.comp.outlined-card.disabled.container.elevation` | Elevation | `md.sys.elevation.level0` | `0dp` | — |
| Disabled › Outline | `md.comp.outlined-card.disabled.outline.color` | Color | `md.sys.color.outline` → `md.ref.palette.neutral-variant50` | `#79747E` | Dark: `#938F99` via `md.ref.palette.neutral-variant60`<br>Medium contrast: `#49454F` via `md.ref.palette.neutral-variant30`<br>High contrast: `#322F37` via `md.ref.palette.neutral-variant20` |
| Disabled › Outline | `md.comp.outlined-card.disabled.outline.opacity` | Opacity | — | `0.12` | — |
| Hovered › Container | `md.comp.outlined-card.hover.container.elevation` | Elevation | `md.sys.elevation.level1` | `1dp` | — |
| Hovered › State layer | `md.comp.outlined-card.hover.state-layer.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Hovered › State layer | `md.comp.outlined-card.hover.state-layer.opacity` | Opacity | `md.sys.state.hover.state-layer-opacity` | `0.08` | — |
| Hovered › Outline | `md.comp.outlined-card.hover.outline.color` | Color | `md.sys.color.outline-variant` → `md.ref.palette.neutral-variant80` | `#CAC4D0` | Dark: `#49454F` via `md.ref.palette.neutral-variant30`<br>Medium contrast: `#79747E` via `md.ref.palette.neutral-variant50`<br>High contrast: `#49454F` via `md.ref.palette.neutral-variant30` |
| Focused › Container | `md.comp.outlined-card.focus.container.elevation` | Elevation | `md.sys.elevation.level0` | `0dp` | — |
| Focused › State layer | `md.comp.outlined-card.focus.state-layer.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Focused › State layer | `md.comp.outlined-card.focus.state-layer.opacity` | Opacity | `md.sys.state.focus.state-layer-opacity` | `0.1` | — |
| Focused › Outline | `md.comp.outlined-card.focus.outline.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Focused › Focus indicator | `md.comp.outlined-card.focus.indicator.thickness` | Length | `md.sys.state.focus-indicator.thickness` | `3dp` | — |
| Focused › Focus indicator | `md.comp.outlined-card.focus.indicator.outline.offset` | Length | `md.sys.state.focus-indicator.outer-offset` | `2dp` | — |
| Focused › Focus indicator | `md.comp.outlined-card.focus.indicator.color` | Color | `md.sys.color.secondary` → `md.ref.palette.secondary40` | `#625B71` | Dark: `#CCC2DC` via `md.ref.palette.secondary80`<br>Medium contrast: `#4A4458` via `md.ref.palette.secondary30`<br>High contrast: `#332D41` via `md.ref.palette.secondary20` |
| Pressed (ripple) › Container | `md.comp.outlined-card.pressed.container.elevation` | Elevation | `md.sys.elevation.level0` | `0dp` | — |
| Pressed (ripple) › State layer | `md.comp.outlined-card.pressed.state-layer.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Pressed (ripple) › State layer | `md.comp.outlined-card.pressed.state-layer.opacity` | Opacity | `md.sys.state.pressed.state-layer-opacity` | `0.1` | — |
| Pressed (ripple) › Outline | `md.comp.outlined-card.pressed.outline.color` | Color | `md.sys.color.outline-variant` → `md.ref.palette.neutral-variant80` | `#CAC4D0` | Dark: `#49454F` via `md.ref.palette.neutral-variant30`<br>Medium contrast: `#79747E` via `md.ref.palette.neutral-variant50`<br>High contrast: `#49454F` via `md.ref.palette.neutral-variant30` |
| Dragged › Container | `md.comp.outlined-card.dragged.container.elevation` | Elevation | `md.sys.elevation.level3` | `6dp` | — |
| Dragged › State layer | `md.comp.outlined-card.dragged.state-layer.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Dragged › State layer | `md.comp.outlined-card.dragged.state-layer.opacity` | Opacity | `md.sys.state.dragged.state-layer-opacity` | `0.16` | — |
| Dragged › Outline | `md.comp.outlined-card.dragged.outline.color` | Color | `md.sys.color.outline-variant` → `md.ref.palette.neutral-variant80` | `#CAC4D0` | Dark: `#49454F` via `md.ref.palette.neutral-variant30`<br>Medium contrast: `#79747E` via `md.ref.palette.neutral-variant50`<br>High contrast: `#49454F` via `md.ref.palette.neutral-variant30` |
:::

## Elevated card

![Diagram indicating elevated card container.](/assets/cf715968-lx8i6cjo-1.DhCnKRHV.webp)

1. Container

### Elevated card color

Color values are implemented through design tokens. For design, this means working with color values that correspond with tokens. For implementation, a color value will be a token that references a value. [Learn more about design tokens](../../foundations/design-tokens/overview.md)

![Color diagram indicating elevated card surface color.](/assets/63c48456-lx8i798w-2.DitPKj7k.webp)

Elevated card color roles used for light and dark themes:

1. Surface container low

### Elevated card states

States are visual representations used to communicate the status of a component or interactive element. [Learn more about interaction states](../../foundations/interaction/states/overview.md)

![Diagram of 5 elevated card states.](/assets/bea3c7b3-m8tathzk-3.CCT62lsU.webp)

Elevated card states: 

1. Hovered
2. Focused 
3. Pressed 
4. Dragged 
5. Disabled

## Filled card

![Diagram indicating filled card container.](/assets/765ac454-lx8i88xc-4.DkFZzLtf.webp)

1. Container

### Filled card color

Color values are implemented through design tokens. For design, this means working with color values that correspond with tokens. For implementation, a color value will be a token that references a value. [Learn more about design tokens](../../foundations/design-tokens/overview.md)

![Color diagram indicating filled card surface color.](/assets/8a23f91e-lx8i8kna-5.CgAUQghP.webp)

Filled card color roles used for light and dark themes:

1. Surface container highest

### Filled card states

States are visual representations used to communicate the status of a component or interactive element. [Learn more about interaction states](../../foundations/interaction/states/overview.md)

![Diagram of 5 filled card states.](/assets/23b2d8f9-m8taswqd-7.DF0EQ5If.webp)

Filled card states: 

1. Hovered
2. Focused 
3. Pressed 
4. Dragged 
5. Disabled

## Outlined card

![Diagram indicating outlined card container and outline.](/assets/f7a04ad7-lx8ia1sc-8.eXQ0Pb-X.webp)

1. Container
2. Outline

### Outlined card color

Color values are implemented through design tokens. For design, this means working with color values that correspond with tokens. For implementation, a color value will be a token that references a value. [Learn more about design tokens](../../foundations/design-tokens/overview.md)

![Outlined card color roles in light and dark themes.](/assets/e1330b66-lx8iah38-9.CPDj3y0-.webp)

Outlined card color roles used for light and dark themes:

1. Surface
2. Outline variant

### Outlined card states

States are visual representations used to communicate the status of a component or interactive element. [Learn more about interaction states](../../foundations/interaction/states/overview.md)

![Diagram of 5 outlined card states.](/assets/cccf87ee-m8taue2l-10.9Xq69xMp.webp)

Outlined card states: 

1. Hovered 
2. Focused 
3. Pressed 
4. Dragged 
5. Disabled

## Measurements

![Diagram with card layout measurements.](/assets/93f9a0c8-lx8ibavc-11.DMuk6hD3.webp)

Card padding and size measurements

|       Attribute       |        Value       |
| :-------------------: | :----------------: |
|         Shape         | 12dp corner radius |
|   Left/right padding  |        16dp        |
| Padding between cards |       8dp max      |
|  Label text alignment |    Start-aligned   |