# Card Patterns

> Card component design, content hierarchy within cards, card grids, and interactive card behaviors.

- Skill: `dragoon0x/card-patterns` (Agent Skill)
- Install (CLI): `npx skillmds@latest add dragoon0x/card-patterns`
- Raw SKILL.md: https://api.skillmd.com/api/skills/dragoon0x/card-patterns/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-patterns

---


# Card Patterns

## Card Anatomy

### Essential Elements (pick what's needed)
- **Media** (image, video, icon) — visual anchor
- **Title** — the primary information
- **Description** — secondary context (2 lines max, truncate with ellipsis)
- **Metadata** — date, author, category, status
- **Actions** — buttons, links, menu

### Hierarchy Within a Card
1. Media (if present) gets the most visual weight
2. Title is the largest text element
3. Description supports but doesn't compete
4. Metadata is smallest/lightest
5. Actions are at the bottom or contextual (hover/menu)

## Card Grid Layouts
- **Fixed columns:** 2, 3, or 4 columns with consistent card sizes
- **Masonry:** Variable height cards (Pinterest-style). Only for visual/media content.
- **List view alternative:** Always offer list view for content-heavy cards.

## Anti-Patterns
- Cards with only text and no visual anchor — use a list instead
- Cards with 5+ action buttons — too much cognitive load
- Cards with inconsistent heights in a row — use fixed aspect ratios or masonry
- Clickable cards where only part is the click target — make the whole card clickable or clearly define the target