Card
Container surface for grouping related content with optional header, body, and footer.
2.4 kBgzipped
At a glance
- Compose
CardwithCardHeader,CardTitle,CardDescription,CardContent, andCardFooterfor the conventional layout. - Card is a content container — use a Dialog for floating surfaces.
CardTitleships with heading semantics so screen readers announce sections in document order.
Preview
Anatomy
| Subcomponent | Role |
|---|---|
Card | Outer surface — border, background, rounded corners. |
CardHeader | Top section with comfortable padding. |
CardTitle | Heading text inside the header. Renders with role="heading". |
CardDescription | Muted subtitle paired with the title. |
CardContent | Body content area. |
CardFooter | Footer row — actions sit here, separated by a divider. |
You don't have to use the subcomponents — Card accepts any children directly when you want a different layout. The subcomponents exist so the most common case is one import line and obvious spacing.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | — | — |
CardHeader / CardContent / CardFooter
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | — | — |
CardTitle / CardDescription
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | — | — |
testID | string | — | — |