Reusable card
Cards group content without taking over page structure.
Foundations
Card
A flexible content card with Snurble surface variants, padding scale, and optional linked or interactive affordance.
Curated demo
Reference
A flexible content card with Snurble surface variants, padding scale, and optional linked or interactive affordance.
- Use Card for generic content grouping when Panel feels too structural.
- Use href for a semantic linked card rather than nesting interactive elements inside another link.
- Keep Card content responsible for headings, copy, and actions; Card owns only the surface treatment.
Props
| Name | Type | Default | Description |
|---|---|---|---|
as | 'article' | 'section' | 'div' | 'article' | Element used when the card is not a link. |
variant | 'flat' | 'bordered' | 'elevated' | 'glass' | 'bordered' | Visual surface treatment. |
padding | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 5 | Spacing token for internal padding. |
interactive | boolean | false | Whether to show hover affordance. |
href | string | — | Render the card as a link. |
class | string | — | Additional CSS classes. |
Example snippet
<Card variant="elevated" interactive>Reusable content surface</Card>