What is a card in UX design?
A card is a self-contained UI component that groups related information and actions pertaining to a single entity or concept. Cards typically have a defined visual boundary, such as a border, shadow, or background color, that distinguishes them from the surrounding content. They are used to display collections of similar items such as products, articles, user profiles, or tasks in a scannable grid or list layout. Each card represents one item and contains the most important information about that item along with the primary actions available for it.
When should you use cards in UX design?
Cards work well for displaying collections of similar items where each item has an image, a title, and supporting metadata. Product grids, content feeds, dashboard widgets, and contact lists are natural fits. Cards become problematic when the items in a collection have very different amounts of content, leading to cards of inconsistent heights that disrupt visual rhythm. They are also less appropriate for dense data tables where precise comparison of values across many attributes is more important than the visual presentation of individual items.
What makes a card design effective?
Effective cards have a clear visual hierarchy within the card itself, with the most important information, typically the title or primary identifier, receiving the strongest visual weight. The primary action should be easy to identify. The entire card or a clearly defined zone within it should be the click target, not just the title text. Cards should maintain consistent dimensions within a collection to support visual scanning. The Gestalt principle of similarity applies strongly to card layouts: cards that look alike signal that the items they represent belong to the same category and can be compared.