Card
The surface everything sits on: 8px radius (rounded-card), lifted by a soft resting shadow (shadow-card) rather than outlined by a border. Feature components are Cards with things composed inside them — a store card is a Card plus a Badge plus a Rating, not hand-rolled divs.
import Card from '@/components/ui/Card';Source: src/components/ui/Card.tsx
Examples
Padding
md by default. none is for a card whose content bleeds to the edge — an image header, a table.
padding="none"
padding="sm"
padding="md" (default)
Tones
A tint, not a status. The blue/green/yellow tones are for grouping — “this block is related” — and they are light enough that navy-700 text stays comfortably readable on all of them. Lavender is the exception and belongs to one surface, the feed’s refer-a-friend card (production’s own .referColor): navy-700 still clears AA on it, but grey-600 secondary text does not (3.91:1), so keep everything on a lavender card at the body default. For a status message use Alert, which has the contrast treatment worked out.
tone="white"
tone="blue"
tone="green"
tone="yellow"
tone="lavender"
Shadow and interactive
Every card rests on shadow-card; shadow raises it a step (shadow-card-hover) for the one card on a surface that should stand out. interactive adds the hover lift to that same raised shadow, and should be set only when the whole card really is clickable — a lift that leads nowhere is a promise the card doesn’t keep.
default (resting shadow)
shadow
interactive — hover me
Composed: a store card
What a feature component actually is. Nothing here is bespoke — Card, Row, Badge, Rating, Caption.
Example Store
4.5 %128 reviews
Props
<Card> props
| Prop | Type | Default | Description |
|---|---|---|---|
as | ElementType | 'div' | — |
padding | 'none' | 'sm' | 'md' | 'md' | — |
shadow | boolean | 'overlay' | false | Lifts the card above its resting shadow: `true` one step (shadow-card-hover), `'overlay'` for a card that floats over the page (a suggestions panel) — shadow-overlay, the same elevation as Menu and Modal. A prop, not a className, for the same stylesheet-order reason as `tone`. |
tone | 'white' | 'blue' | 'green' | 'yellow' | 'lavender' | 'white' | Background tint. Defaults to white. |
interactive | boolean | false | Hover lift + shadow for clickable cards (store cards, deal cards, …). |
childrenrequired | ReactNode | — | — |
Also accepts everything in HTMLAttributes<HTMLElement> — so native attributes (id, onClick, aria-*, data-*) pass straight through.
Usage
Do
- Compose feature components from a Card rather than restyling one.
Don’t
- Don’t nest a Card inside a Card — two stacked shadows read as clutter, not depth. Use a tone or a Divider to group inside one card.
- Don’t use a tone to signal success or error; that is Alert’s job and Alert has the contrast rules.