Card
Groups related content with optional elevation and interactive affordances.
Live preview
Workspace
Manage members and billing.
Card body uses token-backed spacing and typography.
Composition
tsx
API
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "elevated" | "outlined" | "elevated" | Surface depth and border treatment. |
| state | "default" | "interactive" | "default" | Interactive adds hover and focus styles for clickable cards. |
| className | string | — | Additional class names merged with component styles. |
Accessibility
Use headings inside CardHeader for structure; interactive cards should be focusable or wrap controls.