# Product card

A garment card for galleries: 3:4 photo on the studio ground with the status chip on it, then name, cloth code, price and version, with a ⋯ menu. Lifts 2px on hover.

- **Group:** Cards and gallery · **family:** `cards-gallery` · **shadcn:** Card
- **Build:** shadcn `Card` + `next/image` + `DropdownMenu`.
- **In apps/admin today:** `ui/card.tsx` exists.
- **Client component:** no. 

## Content rules

- Navy birdseye two-piece suit · HS 81045 · £1,150 · v4.

## Do

- Keep figures identical to the table view.

## Don't

- Put the price on the photo.

## Motion

- Lift: transform + shadow on `--motion-hover`; 0px under reduced motion.

## Accessibility

- **Keyboard:** Card is one link (the title); ⋯ is a separate button.
- **ARIA:** Image `alt` = product name; status in text.
- **Focus:** Card ring via `:focus-within`.

## Tokens

`--motion-hover` `--lift-shift` `--e-card-hover` `--s-4` `--s-6` `--text-small` `--muted-foreground` `--card` `--border` `--r-card` `--e-1` `--secondary-border` `--focus-ring` `--ring` `--studio` `--r-card-inner` `--s-2` `--background` `--s-3` `--w-semibold` `--text-card` `--lh-card` `--font-voice` `--font-stretch-title` `--foreground` `--font-ui` `--text-micro` `--muted` `--destructive` `--w-medium` `--font-code` `--control-h-m-lg` `--text-read` `--s-1`

## Files

`product-card.html` live specimen · `product-card.css` kit rules · `product-card.d.ts` props · full page: `docs/components/product-card/` (phone: `m/`).