Component
Card
Container surface for grouped content. Four variants from quiet to celebratory.
9:41
Surface
Default. Use for list cards, info panels, and most everyday content.
Elevated
Adds a subtle shadow. Use for important content lifted off the page surface.
Gradient
Reserved for celebratory or hero moments. Don't stack two.
Dark
Solid near-black. Use for splash, hero takeover, or when surrounding gradient would be too loud.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | 'surface' | 'elevated' | 'gradient' | 'dark' | 'surface' | Visual treatment. |
| pad | 'none' | 'sm' | 'md' | 'lg' | 'md' | Internal padding. |