A self-contained container that groups related information and actions into a visually distinct unit, intended to be scanned quickly and interacted with as a single object. Cards work well for variable-length content and browsable collections, but overuse fragments layouts that would benefit from a more unified, scannable structure.
Common contexts
- Displaying a product catalog where each item has a title, image, price, and primary action
- Building a project dashboard where each card represents a distinct task with its own status
- Presenting blog posts as cards in a feed so users can scan and choose what to read
Use when
Use cards when each item in a collection is independent and comparably weighted — users should be able to scan and select without needing to read items in order. Cards are ideal when content length varies across items and when each item has its own primary action.
Avoid when
Cards fail when the content isn't actually discrete — turning a linear article or a step-by-step process into cards fragments the reading flow and makes users work harder to construct the narrative. Overusing cards on every screen also eliminates visual contrast, making it impossible to distinguish what matters.
A page full of cards isn't a layout — it's an abdication of hierarchy. Somewhere in that grid, something should be the most important thing, and it should look like it.
Real-world examples
- Google Now (now Google Discover) pioneered the card-based feed UI, presenting each piece of contextual information in a contained, scannable card unit.
- Trello's entire product interface is built on card metaphors—each task is a card that can be moved across lists, mirroring a physical Kanban board.
- Pinterest's masonry grid of image cards became so influential that the pattern is now called the 'Pinterest layout' across the industry.