Card

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 header and divider), and the generic card that brings its own structure.
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 (title / description / icon / actions / footer) render self-padding sections, so a sectioned card needs no padded. 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.
Density: pass compact or comfortable to tighten or relax the card's own padding and the gap between flat children (compact takes precedence, and a density prop pads the surface on its own). grow fills the height a parent Row or Column hands the card (the body takes the slack, so a footer stays on its floor); inside a Grid cell it is implied, so the tiles of one row are equal-height without being asked.
Active identities

12,348

+142 today
iOS
Active identities

12,348

+142 today
Android
Active identities

12,348

+142 today
Web
tsx
<Card>
<Typography caption medium>Active identities</Typography>
<Typography h3 bold>12,348</Typography>
<Typography tiny muted>+142 today</Typography>
</Card>

Props

Card

Prop
Description
children
ReactNode
—
title
string
Simple content props for the children-less / data-driven case.
icon
ReactNode
A glyph rendered before the title, for a section panel that names itself with an icon. Takes effect on the data-driven path (a card given `title` rather than raw children).
actions
ReactNode
Trailing header content, typically a button. Sits opposite the title so the header reads as one row: name on the left, action on the right.
description
string
—
body
string
—
footer
string
—
raised
boolean
Elevation (pick one; default is a soft resting shadow).
flat
boolean
Elevation (pick one; default is a soft resting shadow).
padded
boolean
Padding (orthogonal booleans). A card with raw children is padded by default, and the data-driven string path (no children) pads through its self-padding sections instead, so neither prop moves the surface inset there. `flush` strips the raw-children inset (edge-to-edge content, or composing the self-padding CardHeader/CardContent); `padded` is the explicit form of the padded-by-default.
flush
boolean
Padding (orthogonal booleans). A card with raw children is padded by default, and the data-driven string path (no children) pads through its self-padding sections instead, so neither prop moves the surface inset there. `flush` strips the raw-children inset (edge-to-edge content, or composing the self-padding CardHeader/CardContent); `padded` is the explicit form of the padded-by-default.
onPress
() => void
When set, the whole card becomes pressable (a card that behaves as a control).
selected
boolean
Active/selected surface: a primary border and a soft primary tint. For selectable cards (a card-style radio or checkbox option that is chosen).
grow
boolean
Grow to fill the main axis of a parent Row/Column (flexGrow: 1). On a card that renders sections, the BODY takes up whatever slack the growth won, so the content region fills the taller surface and a footer stays on its floor rather than floating up under the content. Implied inside a Grid cell: the grid stretches its cells to the row's height and the card fills that box, so the tiles of one row are equal-height without being asked.
compact
boolean
Density (pick one; default is the standard inset). Scales the card's own content padding and the gap between flat children.
comfortable
boolean
Density (pick one; default is the standard inset). Scales the card's own content padding and the gap between flat children.
testID
string
E2E hook forwarded to the root element.
style
LayoutStyle
Composition within a parent only, never a restyle hook and never a width: the parent layout container provides the bounds.

CardSection

Prop
Description
children
ReactNode
—
style
LayoutStyle
Composition within a parent only, never a restyle hook and never a width: the parent layout container provides the bounds.

CardText

Prop
Description
children
ReactNode
—
style
StyleProp<TextStyle>
Outer layout composition only (width/flex within a parent), never a restyle hook.

CardMedia

Prop
Description
src
string | number
The cover image: a URI string (or a docs sample path), or a bundled `require(...)` asset.
height
number
Height of the media band in px (the image covers it edge to edge).
alt
string
Accessible name / alt text announced for the image.
accessibilityLabel
string
Accessible name for the image, as `alt` gives; when both are set it wins, as on Image.
testID
string
E2E hook forwarded to the image.

Do & Don’t

stat

Don’t
This month
We onboarded 12,348 active identities, up 142 today, with churn holding steady.
Prose where the number should be: the eye has nothing big to land on, so the card stops being a stat.
Do
Active identities

12,348

+142 today
U
One big number, a short label, a small delta. The metric is scannable in a glance.

section

Don’t
Recent activity
Two events today.
Without the divider the header floats and stops reading as a header.
Do
Recent activity
Two events today.
Keep the divider between header and body; it anchors the title.

generic

Don’t
Nested surface
A card inside a card doubles the border and shadow.
Nesting one card surface inside another stacks border on border and shadow on shadow; the inner block looks dropped in.
Do
Anything goes here
The card surface gives you the border, radius, and shadow. You bring the content.
Use the surface once and layout the content with plain spacing inside it.
← AlertDialog
CodeBlock →