1---2name: card-design3description: Card component patterns, card layouts, content cards, action cards, and card grid systems.4---56# Card Design78## Anatomy9```10┌─────────────────────┐11│ [Media/Image] │ Optional: visual anchor12│ │13│ Category Label │ Optional: metadata14│ Heading │ Required: primary info15│ Description text │ Optional: supporting info16│ │17│ [Metadata/Footer] │ Optional: date, author, tags18│ [Actions] │ Optional: buttons, links19└─────────────────────┘20```2122## Rules231. **Consistent height in grids** or use masonry. Mixed heights in regular grids look broken.242. **One primary action per card.** The whole card can be clickable, or have a single CTA.253. **Don't overload.** If a card needs more than 4-5 pieces of information, it might need a different format.264. **Image ratios matter.** Pick one ratio (16:9, 4:3, 1:1) and stick with it across the grid.275. **Hover states** should indicate interactivity (subtle lift, border change, or background shift).2829## Card Variants30| Variant | Use Case |31|---------|----------|32| Content card | Blog posts, articles, products |33| Action card | Dashboard widgets, quick actions |34| Profile card | Team members, user profiles |35| Stat card | KPIs, metrics, numbers |36| Media card | Video, image, audio thumbnails |3738## Grid Layouts39- **2 columns:** Side-by-side comparison, editorial40- **3 columns:** Product listings, blog archives (most common)41- **4 columns:** Dense grids, small cards, dashboards42- **Masonry:** Pinterest-style, variable height content4344## Anti-Patterns45- Cards with 3 different clickable areas (confusing targets)46- Drop shadows so heavy they dominate the page47- Border-radius: 24px (too much, 8-12px is usually right)48- Cards that are just styled divs with no interactive purpose
dragoon0x