# Card Design

> Card component patterns, card layouts, content cards, action cards, and card grid systems.

- Skill: `dragoon0x/card-design` (Agent Skill)
- Install (CLI): `npx skillmds@latest add dragoon0x/card-design`
- Raw SKILL.md: https://api.skillmd.com/api/skills/dragoon0x/card-design/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: dragoon0x (https://skillmd.com/u/dragoon0x)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/dragoon0x/card-design

---


# Card Design

## Anatomy
```
┌─────────────────────┐
│  [Media/Image]      │  Optional: visual anchor
│                     │
│  Category Label     │  Optional: metadata
│  Heading           │  Required: primary info
│  Description text  │  Optional: supporting info
│                     │
│  [Metadata/Footer]  │  Optional: date, author, tags
│  [Actions]          │  Optional: buttons, links
└─────────────────────┘
```

## Rules
1. **Consistent height in grids** or use masonry. Mixed heights in regular grids look broken.
2. **One primary action per card.** The whole card can be clickable, or have a single CTA.
3. **Don't overload.** If a card needs more than 4-5 pieces of information, it might need a different format.
4. **Image ratios matter.** Pick one ratio (16:9, 4:3, 1:1) and stick with it across the grid.
5. **Hover states** should indicate interactivity (subtle lift, border change, or background shift).

## Card Variants
| Variant | Use Case |
|---------|----------|
| Content card | Blog posts, articles, products |
| Action card | Dashboard widgets, quick actions |
| Profile card | Team members, user profiles |
| Stat card | KPIs, metrics, numbers |
| Media card | Video, image, audio thumbnails |

## Grid Layouts
- **2 columns:** Side-by-side comparison, editorial
- **3 columns:** Product listings, blog archives (most common)
- **4 columns:** Dense grids, small cards, dashboards
- **Masonry:** Pinterest-style, variable height content

## Anti-Patterns
- Cards with 3 different clickable areas (confusing targets)
- Drop shadows so heavy they dominate the page
- Border-radius: 24px (too much, 8-12px is usually right)
- Cards that are just styled divs with no interactive purpose