Card Design Patterns and When to Use Them
Cards are one of the most versatile and widely used UI patterns — a contained, surfaced area that groups related information and actions about a single item. Used well, they create scannable, organised layouts. Used poorly, they create cluttered, inconsistent pages.
When Cards Work Well
- Displaying a collection of items with equal importance (products, articles, people, projects)
- Items that have variable amounts of content but should visually appear as peers
- Content that benefits from an image preview alongside text
- Items that have primary actions (e.g. "View", "Edit", "Buy")
Card Anatomy
A well-structured card typically includes: an optional media area (image, icon, or illustration), a heading (the item's primary identifier), supporting text (brief description or key metadata), and an action area (buttons, links, or the entire card as a clickable area).
Card Grid Layouts
Cards are typically arranged in responsive grids: 1 column on mobile, 2 on tablet, 3–4 on desktop. We use CSS Grid for card layouts — it handles gaps and alignment automatically and responds to screen width with minimal code.
When Cards Are the Wrong Choice
- For long, structured data with many columns — use a table instead
- For simple lists where items don't have associated actions or media — a plain list is more scannable
- When all items are identical in structure and you are padding them with whitespace to fill cards — use a tighter list or table