FOUNDATIONS · 04 / 89
Card
Card — a Material You foundations component for React Native and web.
packages/ui/src/components/Card.tsx
Live demo
360
720
Full
This is a card content
Properties
2 controls
Variant
Filled
Content
Usage
Card.tsx
<Card>
This is a card content
</Card>
Variants
The states and shapes this component is meant to be used in.
Variants
Filled
Default surface container — the everyday card.
Outlined
A hairline outline instead of a tonal fill.
Elevated
Raised off the background with a shadow.
Glow
Accent halo for the primary call to action.
Profile card
MR
Marta Rossi
Lead product designer
Pressable
With actions
Invite your team
Workspace · Acme Inc.
Everyone you invite gets read access to the shared component library. You can raise their role later from Settings.
Composed from parts
The four Card parts in one composition: cover, header, body, action row.
%22%2F%3E%0A%20%20%20%20%20%20%20%3C%2Fsvg%3E)
GU
Material You 0.2.0
Released 9 September
Stable
Layout primitives, a Material 3 date/time picker and 32 new components. Dark-mode contrast was corrected across every tonal surface.
API reference
Generated from the library's TypeScript, so it cannot drift from the implementation.
Props
5 on CardProps
children
required
React.ReactNode
accessibilityLabel
string
onPress
() => void
style
StyleProp<ViewStyle>
variant
"elevated" | "filled" | "outlined" | "glow"
default: "filled"