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