Card
Surface container for grouped content.
Usage
Compose Card.Root with Card.Header, Card.Content, and Card.Footer. Use only the
sections you need.
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 to let Header/Content/Footer control spacing. | '2' | '4' | '6' | '8' | — |
class Extra classes merged onto the root. | string | — |
children Card sections (Header, Content, Footer). | Snippet | — |
Card.Header · Card.Content · Card.Footer
| Prop | Type | Default |
|---|---|---|
class Extra classes. | string | — |
children Section content. | Snippet | — |