Component

Material Design 3 cards tokens

Browse tokens

Token

See more values

Compare token values by selecting another context

Theme
Contrast
More contexts
Platform
Audience
What do 1P and 3P mean?

1P means first-party; 3P means third-party. We interpret 1P Baseline as the configuration for Google's own products, and 3P as the configuration for other developers.

Material supplies these audience labels but does not define them in the captured data. They are not a baseline-versus-Expressive switch.

Enabled
Container
Container tokens
TokenValue
Outlined card container colormd.comp.outlined-card.container.color
#FEF7FF
Outlined card container elevationmd.comp.outlined-card.container.elevation
0dp
Outlined card container surface tint layer colormd.comp.outlined-card.container.surface-tint-layer.color
#6750A4
Outlined card container shapemd.comp.outlined-card.container.shape
12dp
Outline
Outline tokens
TokenValue
Outlined card container shadow colormd.comp.outlined-card.container.shadow-color
#000000
Outlined card outline widthmd.comp.outlined-card.outline.width
1dp
Outlined card outline colormd.comp.outlined-card.outline.color
#CAC4D0
Icon
Icon tokens
TokenValue
Outlined card icon colormd.comp.outlined-card.icon.color
#6750A4
Outlined card icon sizemd.comp.outlined-card.icon.size
24dp
Disabled
Container
Container tokens
TokenValue
Outlined card disabled container elevationmd.comp.outlined-card.disabled.container.elevation
0dp
Outline
Outline tokens
TokenValue
Outlined card disabled outline colormd.comp.outlined-card.disabled.outline.color
#79747E
Outlined card disabled outline opacitymd.comp.outlined-card.disabled.outline.opacity
12%
Hovered
Container
Container tokens
TokenValue
Outlined card hover container elevationmd.comp.outlined-card.hover.container.elevation
1dp
State layer
State layer tokens
TokenValue
Outlined card hover state layer colormd.comp.outlined-card.hover.state-layer.color
#1D1B20
Outlined card hover state layer opacitymd.comp.outlined-card.hover.state-layer.opacity
8%
Outline
Outline tokens
TokenValue
Outlined card hover outline colormd.comp.outlined-card.hover.outline.color
#CAC4D0
Focused
Focus indicator
Focus indicator tokens
TokenValue
Outlined card focus indicator thicknessmd.comp.outlined-card.focus.indicator.thickness
3dp
Outlined card focus indicator offsetmd.comp.outlined-card.focus.indicator.outline.offset
2dp
Outlined card focus indicator colormd.comp.outlined-card.focus.indicator.color
#625B71
Container
Container tokens
TokenValue
Outlined card focus container elevationmd.comp.outlined-card.focus.container.elevation
0dp
State layer
State layer tokens
TokenValue
Outlined card focus state layer colormd.comp.outlined-card.focus.state-layer.color
#1D1B20
Outlined card focus state layer opacitymd.comp.outlined-card.focus.state-layer.opacity
10%
Outline
Outline tokens
TokenValue
Outlined card focus outline colormd.comp.outlined-card.focus.outline.color
#1D1B20
Pressed (ripple)
Container
Container tokens
TokenValue
Outlined card pressed container elevationmd.comp.outlined-card.pressed.container.elevation
0dp
State layer
State layer tokens
TokenValue
Outlined card pressed state layer colormd.comp.outlined-card.pressed.state-layer.color
#1D1B20
Outlined card pressed state layer opacitymd.comp.outlined-card.pressed.state-layer.opacity
10%
Outline
Outline tokens
TokenValue
Outlined card pressed outline colormd.comp.outlined-card.pressed.outline.color
#CAC4D0
Dragged
Container
Container tokens
TokenValue
Outlined card dragged container elevationmd.comp.outlined-card.dragged.container.elevation
6dp
State layer
State layer tokens
TokenValue
Outlined card dragged state layer colormd.comp.outlined-card.dragged.state-layer.color
#1D1B20
Outlined card dragged state layer opacitymd.comp.outlined-card.dragged.state-layer.opacity
16%
Outline
Outline tokens
TokenValue
Outlined card dragged outline colormd.comp.outlined-card.dragged.outline.color
#CAC4D0