real-world-metaphors

# Real-World Metaphors in UI UI patterns borrowed from the physical world reduce the learning curve because users already know how they work. A card feels like something you can pick up. A carousel feels like flipping through a stack. A drawer feels like it slides out from the side. These metaphors carry affordance — the user knows what to do before reading any instructions. Use them deliberately, not decoratively. ## Common Metaphors and When to Use Them ### Card A card is a bounded, self-contained unit of content — like a physical index card or a product on a shelf. **Use when:** - Content items are discrete and comparable (products, people, articles, tasks) - Each item needs to be scanned quickly and potentially acted on - Items benefit from a visual thumbnail, image, or icon **Key properties:** - Cards should be graspable: elevation (`--shadow-sm`), border-radius, and clear boundary - All cards in a set should be the same width; height can vary with content - One primary action per card — secondary actions appear on hover or inside a detail view - Cards imply "I can pick this up and do something with it" — if nothing happens on click, use a list instead ### Carousel / Horizontal Scroll A carousel borrows from the physical act of flipping through a stack or sliding items along a rail. **Use when:** - There are more items than fit the viewport and browsing is the primary mode - Items have a natural visual order (steps, featured content, media) - The user is expected...