Cards

Cards display content and actions about a single subject.

Overview · Specs · Guidelines · Accessibility

Tokens & specs

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

Design tokens

Token table

Machine-readable relationship table

Cards tokens · 3 token sets · 81 tokens · live token table · 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 Medium contrast: #4F378B via md.ref.palette.primary30 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 Medium contrast: #4F378B via md.ref.palette.primary30 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 Medium contrast: #000000 via md.ref.palette.neutral0 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 Medium contrast: #000000 via md.ref.palette.neutral0 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 Medium contrast: #4A4458 via md.ref.palette.secondary30 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 Medium contrast: #000000 via md.ref.palette.neutral0 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 Medium contrast: #000000 via md.ref.palette.neutral0 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 Medium contrast: #4F378B via md.ref.palette.primary30 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 Medium contrast: #4F378B via md.ref.palette.primary30 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 Medium contrast: #000000 via md.ref.palette.neutral0 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 Medium contrast: #000000 via md.ref.palette.neutral0 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 Medium contrast: #000000 via md.ref.palette.neutral0 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 Medium contrast: #4A4458 via md.ref.palette.secondary30 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 Medium contrast: #000000 via md.ref.palette.neutral0 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 Medium contrast: #000000 via md.ref.palette.neutral0 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 Medium contrast: #4F378B via md.ref.palette.primary30 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 Medium contrast: #79747E via md.ref.palette.neutral-variant50 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 Medium contrast: #4F378B via md.ref.palette.primary30 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 Medium contrast: #49454F via md.ref.palette.neutral-variant30 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 Medium contrast: #000000 via md.ref.palette.neutral0 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 Medium contrast: #79747E via md.ref.palette.neutral-variant50 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 Medium contrast: #000000 via md.ref.palette.neutral0 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 Medium contrast: #000000 via md.ref.palette.neutral0 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 Medium contrast: #4A4458 via md.ref.palette.secondary30 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 Medium contrast: #000000 via md.ref.palette.neutral0 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 Medium contrast: #79747E via md.ref.palette.neutral-variant50 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 Medium contrast: #000000 via md.ref.palette.neutral0 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 Medium contrast: #79747E via md.ref.palette.neutral-variant50 High contrast: #49454F via md.ref.palette.neutral-variant30

Elevated card

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

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

Elevated card states: 

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

Filled card

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

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

Filled card states: 

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

Outlined card

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

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

Outlined card states: 

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

Measurements

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