dragoon0x 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
- Media (if present) gets the most visual weight
- Title is the largest text element
- Description supports but doesn't compete
- Metadata is smallest/lightest
- 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