Cards are the fundamental building block of the glass design system.
Variants
We support multiple card styles via the variant prop.
| Variant | Description | Visual Style |
|---|---|---|
glass | Standard frosted glass | Blur + Border |
solid | Opaque background | High contrast |
outline | Border only | Minimalist |
Live Examples
Glass Card
Standard frosted glass effect with blur and subtle border.
Solid Card
Opaque background for high contrast.
Outline Card
Minimalist border-only style.
Code Usage
<Card variant="glass" className="p-6"> <h3>Glass Card</h3> <p>This creates a beautiful depth effect.</p></Card>