Card
Container surface for grouped content. Supports 4 visual variants and padding sizes.
Variants
default
elevated
bordered
selectable
import { Card } from '@canarist/ui'
<Card variant="default">Default</Card>
<Card variant="elevated">Elevated</Card>
<Card variant="bordered">Bordered</Card>
<Card variant="selectable">Selectable</Card>Padding sizes
sm
md
lg
<Card padding="sm">Small padding</Card>
<Card padding="md">Medium padding</Card>
<Card padding="lg">Large padding</Card>Selected state
Selected
Unselected
<Card variant="selectable" selected>Selected</Card>
<Card variant="selectable">Unselected</Card>Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | 'default' | 'elevated' | 'bordered' | 'selectable' | 'default' | Visual style of the card surface. |
| padding | 'none' | 'sm' | 'md' | 'lg' | 'md' | Inner padding of the card. |
| selected | boolean | — | Highlight the card as selected. Intended for selectable variant. |
| className | string | — | Additional CSS classes. |