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)