← Design system
Card
Interactive examples and usage for the Card component.
Examples
Default card content
Elevated card with shadow
Outlined variant
Ghost — no background
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'default' | 'elevated' | 'outlined' | 'ghost' | 'gradient' | 'default' | Visual style variant |
padding | 'none' | 'sm' | 'md' | 'lg' | 'md' | Internal padding |
interactive | boolean | false | Add hover and focus styles for clickable cards |
fullWidth | boolean | false | Expand to fill container width |