Card

Filled, elevated and outlined cards (COMPONENT_SPEC §19). Plain HTML with m3e-css classes. An interactive card has one primary action whose hit area covers the card; other controls inside it keep working.

Cards

filled
Non-interactive: no state layer, no elevation change.
elevated
Non-interactive: no state layer, no elevation change.
outlined
Non-interactive: no state layer, no elevation change.

Interactive

filled card
The whole card opens the link.
elevated card
The whole card opens the link.
outlined card
The whole card opens the link.

Disabled
Action is aria-disabled.
Disabled outlined
Border at 12% outline.
Dragged
data-dragged: dragged elevation.

React

<Card> with a <CardAction>.