Cards

What is it?

A card is a contained, actionable unit of information that represents a single entity within a collection. Cards group related information and actions, making them self-contained and comparable within a grid or feed. They are used for product listings, content feeds, user profiles, article previews, and more.

Why it matters

Cards are the dominant pattern for surfacing collections of content in modern UIs — from e-commerce product grids to news feeds to kanban boards. Their design directly affects scannability, clickthrough rates, and how efficiently users find what they're looking for.

Best Practices

• Define a consistent aspect ratio for cards within the same collection — visual consistency aids scanning.
• Limit the number of elements on a card — image, title, subtitle, one action. Add more only if genuinely needed.
• The entire card area should be the click target if the card represents a single destination.
• Cards within the same collection should have the same structure — same fields, same position.
• Use card hover states to indicate interactivity and reveal secondary actions.
• Card images should be meaningful — not decorative — and have appropriate alt text.
• Status badges (new, sale, out of stock) should be overlaid on the image, not in the text area.
• For interactive card grids, provide keyboard navigation between cards.
• Skeleton cards for loading states — more readable than generic spinners for grid layouts.
• Action buttons within cards should not compete with the card's primary click action.

Common Mistakes

• Inconsistent card heights within a collection — makes visual scanning harder.
• Multiple primary CTAs on a single card competing for attention.
• Cards with 8+ pieces of information — should be simplified or a different component used.
• Non-clickable cards that look like clickable cards (affordance problem).
• Cards within a collection with different structures (some with images, some without, some with CTAs, some without).

Checklist

Research & Theory

Real-World Examples