Card

• 1: Container

Use a card to display content and actions on a single topic.

Cards should be easy to scan for relevant and actionable information. Elements like text and images should be placed on cards in a way that clearly indicates hierarchy.

Cards can serve as entry points into deeper levels of detail or navigation, such as a music album or Details on an upcoming vacation.

Cards can be displayed together in a grid, vertical list, or carousel.

States

• 1: Enabled
• 2: Pressed
• 3: Disabled

Specs

Enabled

Details

Container

Token	Value
ds.comp.card.containerOutlineColor	ds.sys.color.outlineVariant
ds.comp.card.containerOutlineWidth	0dp
ds.comp.card.containerColor	ds.sys.color.surfaceContainer
ds.comp.card.containerElevation	ds.sys.elevation.level2
ds.comp.card.containerShape	ds.sys.shape.corner.extraSmall
ds.comp.card.containerPaddingVertical	16dp
ds.comp.card.containerPaddingHorizontal	16dp

Pressed

Details

State Layer

Token	Value
ds.comp.card.pressedStateLayerColor	ds.sys.color.onSurface
ds.comp.card.pressedStateLayerOpacity	ds.sys.state.pressedStateLayerOpacity

Disabled

Details

Container

Token	Value
ds.comp.card.disabledContainerElevation	ds.sys.elevation.level0
ds.comp.card.disabledContainerColor	ds.sys.color.surfaceContainer
ds.comp.card.disabledContainerOpacity	ds.sys.state.disabledContainerOpacity
ds.comp.card.disabledContainerOutlineColor	ds.sys.color.onSurface
ds.comp.card.disabledContainerOutlineOpacity	ds.sys.state.disabledContainerOpacity

React Native

<Card>
    // ... content
</Card>

Props

Prop	Type
style (optional)	ViewStyle
onPress (optional)	(event: GestureResponderEvent) => void
disabled (optional)	boolean