Card
Surface container for grouped content.
Usage
Compose Card.Root with Card.Header, Card.Content, and Card.Footer. Use only the
sections you need.
There is no Card.Title. Put your own heading inside Card.Header, at whatever level the surrounding document needs. In this
library Title is the part that supplies a region's accessible name
through aria-labelledby, so only the labelled overlays have one
— Dialog, AlertDialog, Sheet and Alert. A card is not a labelled
region, and a component that hardcoded its heading level would fight the page it sits in.
Card title
Card body content goes here.
Variants
Three surface treatments via the variant prop on Card.Root.
Elevated — drop shadow, no border.
Outlined — visible border, no shadow.
Filled — filled background surface.
Composition
Header gets a bottom border, Footer gets a top border. Mix in any other Sve·UI component.
Invoice #1042
Due on July 15 · $240.00
Props
Card.Root
| Prop | Type | Default |
|---|---|---|
variant | 'elevated' | 'outlined' | 'filled' | 'elevated' |
padding Shorthand padding applied to the root. Omit it to let Header, Content and Footer control their own spacing. | '2' | '4' | '6' | '8' | — |
class Extra classes merged onto the root. | string | — |
children Card sections — Header, Content, Footer. | Snippet | — |
Card.Header
| Prop | Type | Default |
|---|---|---|
class | string | — |
children | Snippet | — |
Card.Content
| Prop | Type | Default |
|---|---|---|
class | string | — |
children | Snippet | — |
Card.Footer
| Prop | Type | Default |
|---|---|---|
class | string | — |
children | Snippet | — |
Card.Header · Card.Content · Card.Footer