Card
The surface everything sits on: 3px radius, grey-200 hairline, optional shadow. 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
interactive adds the hover lift, 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.
flat
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 | false | The guide's standard drop shadow. |
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 shadowed Card inside a shadowed Card — the system has one elevation.
- Don’t use a tone to signal success or error; that is Alert’s job and Alert has the contrast rules.