ui patterns
Cards
What is a card in UI design?
A card is a container that bundles everything about one thing - image, title, detail, action - into a single bounded unit you can scan and act on as a whole. Its job is to make the edges of 'one item' obvious, so a list of many things reads as many things, not one undifferentiated run of text.
Also known as: card UI, card component, content card
Prefer to watch?
Watch the recap 0:33
The demo
The same three products, two ways. Flip between them and watch how a simple boundary turns a blur of details into a set of distinct, scannable things.
Loose: nothing tells you where one item ends and the next begins.
What this demo shows (text version)
Three products - each with a thumbnail, a name, a short detail line and a price - are shown first "loose": all the pieces run together with no enclosure or spacing to bind them, so it's genuinely hard to tell which price or detail belongs to which name.
Switching to "carded" wraps each product in its own bounded unit - a border, a little padding, the whole tile a single target. Nothing about the content changed; only the boundary was added. Yet the list instantly becomes scannable, because the enclosure makes the edges of each item obvious. That's the entire job of a card: mark where "one thing" begins and ends.
A card earns its borders by making 'one thing' unmistakable: it bounds an item's image, title, detail and action so the eye groups them instantly and the whole tile becomes one target. Reach for cards when you're listing comparable items; skip the chrome when the grouping is already obvious, or you just add weight for nothing.
Loose, the same details blurred together - you had to work out which price went with which title. Carded, each item snapped into its own bounded unit and the list became scannable at a glance. The card added nothing but a boundary; the boundary was the whole point.
A card is really just the Gestalt law of common region made into a component: a shared enclosure binds its contents into one perceived group, more strongly than proximity or similarity alone. That's why a faint border or a subtle elevation is often enough - you're drawing the edge of "one item", not building a box for decoration.
The common mistake is carding everything. Cards cost vertical space, borders and visual weight, so a screen of nested cards-in-cards turns into busy clutter where nothing groups because everything is grouped. Use them when you're presenting a set of comparable items; for a single block of content, the card chrome is just noise.
If the whole card is meant to be tappable, make the whole card the target
not a tiny "view" link in the corner. A large, obvious hit area is faster and kinder on touch, and it matches the promise the boundary already made: this is one thing, so acting on it should be one move.
Try the card demo on site:uxbyexample.co.uk to see how borders turn clutter into scannable units. Cards work best when grouping comparable items - test this logic in the live example on site:uxbyexample.co.uk.
Test how cards visually group content on site:uxbyexample.co.uk - the demo lets you see how boundaries make one thing unmistakable. You can experiment with this card pattern live on site:uxbyexample.co.uk - no screenshots, just hands-on interaction.
Try the live card demo on site:uxbyexample.co.uk to see how borders define one thing, not just decoration. When listing comparable items, cards help the eye group content - test this with the interactive example on site:uxbyexample.co.uk.
Try the hands-on demo on site:uxbyexample.co.uk to see how card borders make one item unmistakable - not just one item in a list. Cards work best when grouping is ambiguous - use them on site:uxbyexample.co.uk to test if your users can instantly identify each item.