Card

Molecule
A content surface, used three ways: a stat card (a single metric, a big number and a delta), a section card (a labeled surface with an optional eyebrow, header and footer), and the generic card that brings its own structure. It is the Canvas v4 panel: the card fill under a hairline at the card corner (16 px on the web, 12 natively), the small shadow at rest and the large one raised; flat drops the shadow and steps the fill up a surface, sunken drops the shadow and sinks the fill to the well beneath the page (surface-sunken, the hand-off's --bg2 tiles, stages and panels set into a card) under the hairline, and outlined drops the shadow and keeps the card fill under the hairline (the hand-off's page cards; a platform whose card control draws an outline instead of a shadow draws both the same), and heroShadow is the medium shadow (the hand-off's --sh-md, its section hero's stage), between the resting card and the raised one. Precedence is raised, flat, sunken, outlined, heroShadow. On Android sunken is the Material 3 filled card: the well's fill with no outline. A pressable card lifts 2 px on hover and takes the raised shadow. selected draws the primary border with a ring of the accent's soft wash around it.
src/molecules/card
View in Surfaces & data

Playground

Every control sets a real prop of CardProps. The JSX below updates as you go.
Library
MIT
Canvas v4.0.0
107 components, three platform skins, one accent.
Active identities

12,348

+142 today
Updated Oct 26
Props
Elevation
pick one
Mode
pick one
eyebrow
string
title
string
description
string
badge
string
footer
string
Density
pick one
selected
boolean
JSX · CardProps
<Card
eyebrow="Library"
title="Canvas v4.0.0"
description="107 components, three platform skins, one accent."
badge="MIT"
footer="Updated Oct 26"
/>

Variants

16 examples from src/molecules/card/card.md, each rendered live from its own JSX.
Awaiting approval · Architect gate
Architecture
B
Blueprint
v3.0
Proposes service boundaries for pricing and money paths.
A human signs every money path.
Commerce · $2.1k / 30d
Featured approval
featured washes the card with the accent's soft tint from its top-left corner and rims it in the accent. Supply the identity, eyebrow, stage badge, summary, gate caption, metadata and domain action controls. stacked sets a second card behind it. A pressable featured card lifts two pixels on hover.
<Card featured stacked hue={285} initials="B" title="Blueprint" description="v3.0" eyebrow="Awaiting approval · Architect gate" badge="Architecture" body="Proposes service boundaries for pricing and money paths." caption="A human signs every money path." metadata="Commerce · $2.1k / 30d" actions={<Button primary small>Approve</Button>} />
Artwork alone
Give artwork a parent with definite height. It paints two radial blooms, the accent and the brand cyan (swapped on promo), over the quiet surface, without text, padding or shadow. Add illustration with children for a 12px inset around an identity.
<Row cozy>
<Column fill flush style={{ height: 100 }}><Card featured artwork /></Column>
<Column fill flush style={{ height: 100 }}><Card promo artwork /></Column>
</Row>
Gates come down only with receipts.
Autonomy charter, circuit breakers, all as code.
Read the charter
Promotional artwork
promo sweeps from the accent to the brand cyan, each mixed into the card fill, under the card's own inks. It stays opaque content in glass mode.
<Card promo title="Gates come down only with receipts." body="Autonomy charter, circuit breakers, all as code." actions={<Button inlineLink link small>Read the charter</Button>} />
CORE-1790
Size the pricing bet
·
In Progress
CORE-1790
Size the pricing bet
In Progress
CORE-1790
Size the pricing bet
Jira
CORE-1790
Size the pricing bet
In Progress · Platform Core
Linked references
referenceInline, referenceStacked, referenceTile and referenceDetail preserve the original Argus reference layouts. referenceKey is the key, title the summary and description the status/context. referenceSource adds the source affordance in the detail panel. An href opens through the system browser.
<Column cozy>
<Card referenceInline referenceKey="CORE-1790" title="Size the pricing bet" description="In Progress" />
<Card referenceStacked referenceKey="CORE-1790" title="Size the pricing bet" description="In Progress" />
<Card referenceTile referenceKey="CORE-1790" title="Size the pricing bet" />
<Card referenceDetail referenceKey="CORE-1790" title="Size the pricing bet" description="In Progress · Platform Core" referenceSource="Jira" />
</Column>
Anything goes here
Generic
<Card>
<Typography lead semibold>Anything goes here</Typography>
</Card>
The surface owns the rhythm
Each line lands a steady step below the last.
No layout wrapper between them.
Flat children
<Card>
<Typography lead semibold>The surface owns the rhythm</Typography>
<Typography small muted>Each line lands a steady step below the last.</Typography>
<Typography small muted>No layout wrapper between them.</Typography>
</Card>
Outlined and quiet
Flat
<Card flat>
<Typography lead semibold>Outlined and quiet</Typography>
</Card>
Lifted above the page
Raised
<Card raised>
<Typography lead semibold>Lifted above the page</Typography>
</Card>
Compact
Tight padding and rhythm.
Comfortable
Roomy padding and rhythm.
Density
<Column cozy>
<Card compact>
<Typography lead semibold>Compact</Typography>
<Typography small muted>Tight padding and rhythm.</Typography>
</Card>
<Card comfortable>
<Typography lead semibold>Comfortable</Typography>
<Typography small muted>Roomy padding and rhythm.</Typography>
</Card>
</Column>
Recent activity
Two events today.
Section
<Card title="Recent activity" body="Two events today." />
Identity
ID
6f1c2a
State
Active
Section with children
<Card title="Identity">
<DescriptionList
items={[
{ term: "ID", value: "6f1c2a" },
{ term: "State", value: "Active" },
]}
/>
</Card>
Identity
Name, primary email, and sign-in methods.
Updated 2 minutes ago
Icon and footer
<Card
title="Identity"
icon={<Icon user size={16} />}
body="Name, primary email, and sign-in methods."
footer="Updated 2 minutes ago"
/>
Kira Tanaka
Media
<Card flush>
<CardMedia src="/kira-tanaka.jpg" alt="Portrait of Kira Tanaka" />
<CardContent>
<Typography h5 semibold>Kira Tanaka</Typography>
</CardContent>
</Card>
Rename the workspace. The URL updates everywhere.
Actions
<Card flush>
<CardContent>
<Typography small>Rename the workspace. The URL updates everywhere.</Typography>
</CardContent>
<CardSeparator />
<CardFooter>
<Button ghost small>Cancel</Button>
<Button primary small>Save</Button>
</CardFooter>
</Card>
Pressable
Pass onPress and the whole card becomes a control, with the button role. On the web it lifts under the pointer: it rises 2 px over 180 ms while its resting shade deepens to the raised one in step, and settles back when the pointer leaves (a raised or flat card rises with its shade unchanged). While it lifts and settles it stacks above the cards around it, so its deeper shade falls over the next one. Reduce Motion makes the change instant. iOS and Android keep their own press feedback.
<Column relaxed>
<Card onPress={() => {}} title="Scout" description="Research agent, v2.3" />
<Card onPress={() => {}} title="Mint" description="Release agent, v1.8" />
</Column>
Selectable
<Card selected onPress={() => {}}>
<Typography lead semibold>Pro</Typography>
</Card>

States

Hover, focus and press are pinned so they can be compared side by side; the rest are real props.
Library
MIT
Canvas v4.0.0
107 components, three platform skins, one accent.
Active identities

12,348

+142 today
Updated Oct 26
default
Library
MIT
Canvas v4.0.0
107 components, three platform skins, one accent.
Active identities

12,348

+142 today
Updated Oct 26
hover
Library
MIT
Canvas v4.0.0
107 components, three platform skins, one accent.
Active identities

12,348

+142 today
Updated Oct 26
focus
Library
MIT
Canvas v4.0.0
107 components, three platform skins, one accent.
Active identities

12,348

+142 today
Updated Oct 26
selected

Anatomy

Library
MIT
Canvas v4.0.0
107 components, three platform skins, one accent.
Active identities

12,348

+142 today
Updated Oct 26
1
Surface
2
Eyebrow
3
Title
4
Description
5
Badge
6
Footer
Dimmed parts appear only in some states or variants.

Props

92 props on CardProps, grouped as they are declared in source. Required props are marked *.
Prop
Type
Default
Description
Props
32 props
featured
boolean
false
Original illustrated approval banner.
artwork
boolean
false
Show only the authored artwork, filling bounds supplied by the parent.
illustration
boolean
false
Inset an illustration in authored artwork.
controls
boolean
false
promo
boolean
false
Original promotional gradient card.
stacked
boolean
false
Stack the featured illustration above its content.
hue
number
–
initials
string
–
eyebrow
string
–
badge
string
–
caption
string
–
metadata
string
–
referenceInline
boolean
false
A compact unframed reference summary in a row.
referenceStacked
boolean
false
A reference key/status row above its summary.
referenceTile
boolean
false
A compact inset reference panel.
referenceDetail
boolean
false
A roomy reference panel with context and source.
referenceKey
string
–
referenceSource
string
–
href
string
–
Open the reference through the system browser.
children
ReactNode
–
board
boolean
false
A board ticket with fixed text slots and an optional full-bleed image header.
ticketNumber
string
–
priorityLabel
string
–
statusLabel
string
–
blocked
boolean
false
Display Blocked, or Blocked by the supplied reason, as the status.
blockedReason
string
–
typeLabel
string
–
aiActive
boolean
false
Display functional text shimmer and cycling dots while work is active.

Accessibility and keyboard

Keyboard
Enter
Activates
Space
Activates
Tab
Moves focus on
Semantics
Roles
button
link
progressbar
text
States
busy
ARIA on web
aria-busy
aria-hidden
Below the platform minimum, the touch area grows to 44 pt on iOS and 48 dp on Android without moving the layout.
From the docs
Gap-free content densities preserve dense application layouts: dense (12), snug (18), cozy (20), relaxed (22×24), spacious (28), insetContent (14), rail (12×14), summary (14×16), metric (14×18), request (18/22/18/20), and menu (12 vertical). roomy sits between relaxed and spacious and keeps a rhythm: a 24 px inset with 20 px between flat children, the Canvas v4 section page's showcase card, the same on every platform. Precedence follows that order, then the page steps (panel, guide,

Platform skins

The playground's props on each platform: same tree, native shapes, type and touch sizes.
Identity
Name, primary email, and sign-in methods.
Updated 2 minutes ago
Web
control 10 · field 10 · card 16 · Instrument Sans
Identity
Name, primary email, and sign-in methods.
Updated 2 minutes ago
iOS
capsule controls · field 8 · card 12 · SF Pro · 44 pt
Identity
Name, primary email, and sign-in methods.
Updated 2 minutes ago
Android
Material 3 stadium · field 4 · card 12 · Roboto · 48 dp

Usage

<Card>
<Typography caption medium>Active identities</Typography>
<Typography h3 bold>12,348</Typography>
<Typography tiny muted>+142 today</Typography>
</Card>
Corners (pick one; the smaller step wins): the card corner by default, smallCorners for the tile corner (12), and the three steps the hand-off's component page frames with, calloutCorners (14: a note under a table, a compact link tile), largeCorners (18: a card framing a section of a page) and stageCorners (20: a staging frame, a figure and its legend), and the two its section pages frame with, showcaseCorners (20: a section page's showcase card) and heroCorners (24: the section hero's stage). The web skin draws each from its row; the native skins keep their own card corner on every step but the tile.
A card with content is padded by default, and a padded surface also spaces its flat children (the card owns the vertical rhythm, so a stack of Typography lines needs no layout wrapper); pass flush to opt out of both, the inset and the spacing, for edge-to-edge content (a table, a nav bar) or when you compose the self-padding CardHeader/CardContent.
The section props (eyebrow / badge / title / description / icon / actions / footer) render self-padding sections, so a sectioned card needs no padded: a tracked mono eyebrow with a badge opposite, the 20 px title in the display face over its muted description, the body, and a footer under a hairline in the subtle ink. They compose with a string body OR with raw children, so a panel can carry a titled header above a table or a form; children win when both are passed. For a cover image, CardMedia is the full-bleed top slot: it spans the card edge to edge, its top corners follow the card's corner, and its bottom edge stays flat; compose it with flush and let CardContent pad the text below.

Tokens

Read from the playground render. Values follow the scheme and the ion hue.
--f-dp
--fd
--fm
--ft
--ion-tx
--ln
--ln2
--sf
--sf3
--sh-sm
--tx2
--tx3

Related components