# Cards

Canonical card: `@/components/ui/card`.

Use cards for **interactive or grouped content units** (settings panels, post previews, pricing cells). Do not wrap every section in a card. Do not put cards in the hero.

## Anatomy

```tsx
import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter,
  CardAction,
} from "@/components/ui/card";

<Card>
  <CardHeader>
    <CardTitle>عنوان</CardTitle>
    <CardDescription>توضیح کوتاه</CardDescription>
    <CardAction>{/* optional */}</CardAction>
  </CardHeader>
  <CardContent>…</CardContent>
  <CardFooter>…</CardFooter>
</Card>
```

## Spec

| Property | Value |
| --- | --- |
| Background | `bg-card` |
| Text | `text-card-foreground` |
| Radius | `rounded-xl` (≈ `--radius-xl`) |
| Border | `border border-border` |
| Shadow | `shadow-glow-sm` → hover `shadow-glow-primary` (dark hover `shadow-glow-lg`) |
| Padding | Vertical `py-6`; header/content/footer `px-6` |
| Internal stack | `flex flex-col gap-6` |
| Title type | `type["card-title"]` |
| Description type | `type["card-desc"]` |
| Transition | `duration-200` on border + shadow |

## Hover

| Mode | Behavior |
| --- | --- |
| Light | `hover:border-primary/30 hover:shadow-glow-primary` |
| Dark | `dark:hover:border-primary/40 dark:hover:shadow-glow-lg` |

Hover is subtle—cards should not jump (`translate`) or scale aggressively. Timeline roadmap cards are a special case with their own CSS in `globals.css`.

## Dark mode

Cards use semantic `card` tokens (`#1c2424` in dark). Do not force `bg-white` on cards.

## Spacing with grids

```tsx
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
  {items.map((item) => (
    <Card key={item.id}>…</Card>
  ))}
</div>
```

## Blog / media cards

Blog surfaces may use `rounded-blog` (`--radius-blog: 0.9375rem`) on images/figures. Prefer shared `Card` for structured panels; media-heavy tiles may compose `Card` + `Image` with `object-cover` and consistent aspect ratios ([images.md](./images.md)).

## Forbidden

- Nested cards inside cards for decoration.
- Heavy multi-layer drop shadows.
- Random `rounded-2xl` / `rounded-md` overrides without reason.
- Cards as the only way to create section background (use `bg-section-*` instead).

## Related

- [colors.md](./colors.md)
- [spacing.md](./spacing.md)
- [glassmorphism.md](./glassmorphism.md)