# Cards (`cards.md`)

Marketing and dashboard card families share softness (rounded corners, subtle shadows) but diverge on data density.

## Marketing cards

Representative usages:

| Type | Traits | Seen in |
| --- | --- | --- |
| Service highlight | Imagery left/top, textual stack, pill CTA | home + services grids |
| Case teaser | Aspect media, eyebrow slug, excerpt | portfolio index |
| Comparison card | bordered columns + icon bullets | industry templates |
| Offer / pricing tier | tonal background, emphasized tier badge | calculators / tiers |

Recipes:

```
bg-white rounded-2xl shadow-lg border border-black/[0.04] p-5 md:p-6
```

Inverted / premium slabs:

```
bg-neutral-900 text-white rounded-2xl shadow-lg p-8
```

### Motion

Marketing often uses `.hover:-translate-y-1 transition-transform`.

## Dashboard cards (`dashboard/leads/index.blade.php`)

- KPI filter cards: highlight ring (`ring-2 ring-criazo-primary/50 ring-offset-*`) when representing active filters.
- Lead cards combine avatar circle, badges, segmented metadata blocks resembling CRM UI.
- Progress bars mimic multi-step completeness with gradients.

Empty state card: padded white panel with illustrative icon glyph + headline + subdued description.

### Do / Don’t

**Do** align border radii (`rounded-criazo-lg` family) inside dashboard.**Don’t** import marketing mega-shadows wholesale—maintain restrained `shadow-criazo`.

## Related docs

[`sections.md`](sections.md) explains how cards tessellate in larger arcs.