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
- Consistent height in grids or use masonry. Mixed heights in regular grids look broken.
- One primary action per card. The whole card can be clickable, or have a single CTA.
- Don't overload. If a card needs more than 4-5 pieces of information, it might need a different format.
- Image ratios matter. Pick one ratio (16:9, 4:3, 1:1) and stick with it across the grid.
- 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
