Design Component

UI component patterns for Empathy Ledger with cultural sensitivity.

When to Use

• Building storyteller/story cards
• Implementing data displays
• Adding AI content enrichment
• Creating profile components

Quick Reference

Card Data Hierarchy

1. Always show: name, avatar, cultural_background, story_count
2. On card: badges, top specialties, location
3. On hover: bio, all specialties, themes
4. Profile only: contact, full stories, connections