Card layout design: when cards fit, how to vary them, and the hover problem
Cards are the right container when a page holds many items of the same kind that people scan and compare: products, projects, recipes, events. They're the wrong one for three paragraphs of marketing. Good card layout design starts from that distinction, then keeps the cards quiet enough that their content does the talking.
What a card is for
A card groups everything about one item into a single unit (an image, a title, a few facts, a link) so it can be scanned, compared and picked out of a set. That's why cards work so well for shop products, portfolio projects, blog posts, events and team members: the items share a structure, there are enough of them to need a grid, and visitors move between them.
Cards stop working when they're used as decoration. Three cards with an icon, two-word title and a sentence each are the most common example. They don't hold items; they hold a sales pitch chopped into thirds. That content usually reads better as a short paragraph or a list with specifics.
Cards, lists or plain sections?
| Content | Better container | Why |
|---|---|---|
| Products with photos | Card grid | Images lead; items are compared visually |
| Services with prices and durations | List with detail | One column of prices is faster to scan than prices scattered across cards |
| Portfolio projects | Card or image grid | The picture is the main information |
| Three selling points | A paragraph or a short list | They aren't items to compare |
| Events by date | List, or cards if each has an image | Dates read best in a column |
| Key figures on a dashboard | Small cards | Each figure is a separate, glanceable unit |
Designing the card itself
- Image first, at a fixed aspect ratio. Use one ratio per grid (4:5 for products, 3:2 for projects) and
object-fit: coverso rows line up. - Title, then the deciding fact. For a product, the name and price. For an event, the date and place. For a project, the client and the year. Put the fact that drives the choice where the eye lands second.
- One link per card. Make the title the link, and if the whole card should be clickable, stretch that link with a pseudo-element over the card rather than wrapping the whole card in an anchor, so screen readers announce just the title.
- Few decorative layers. A border or a surface colour, not both plus a shadow. Shape should follow role: cards can share one radius while buttons and inputs have their own.
- Columns by content width.
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr))gives as many columns as fit. Three or four per row on desktop, two on tablets, one on phones is typical.
Vary cards by content, not by decoration
A grid of identical cards can feel like a spreadsheet. The fix isn't random colours or rotating tilts; it's letting real differences show. A featured product can span two columns. A project with a wide image can take a landscape card. A sold-out item can show that plainly. When the content differs, the cards can too, and the grid stays readable because the differences mean something.
The hover problem
A common default makes every card jump up a few pixels with a bigger shadow on hover. On its own it seems harmless. Across a page of twelve cards, a feature grid and a pricing table, it turns mouse movement into constant motion and stops meaning anything: cards that aren't links lift just like the ones that are. It also does nothing on touch screens, where there's no hover at all.
- Give hover feedback only to clickable cards. Static cards shouldn't react.
- Make the feedback small and specific. Underline the title, darken the border or zoom the image slightly inside its frame.
- Match the focus state. Whatever shows on hover should also show on keyboard focus, with a visible outline.
- Keep motion short. 150ms to 200ms with a custom ease-out curve, and none for visitors who ask for reduced motion.
Cards in Anticode
Each of Anticode's seven design systems shapes cards differently, which is one of the most visible differences between them. Editorial, Swiss and Luxury use no box at all, just a rule above each item; Technical uses a bordered surface; Playful a thick outline with generous rounding; Brutalist a 2px outline with a hard offset shadow; Organic a soft filled surface with rounded corners. In every system, radius is assigned by role, so cards, buttons and inputs don't all share one corner.
The Critic flags pages where cards lift on hover by moving upwards, and checks that shape follows role. For the opposite mistake, a single hover state that only fades opacity, see hover effects for websites.
Questions people ask
Should cards lift on hover?
Only clickable ones, and subtly. When every card lifts, the motion stops signalling anything. An underlined title or a darker border is often enough.
How many cards should go in a row?
Let the minimum readable card width decide: usually three or four on desktop, two on tablets and one on phones. A CSS grid with auto-fill handles this automatically.
Should cards have shadows?
A border or a surface colour usually does the job. If you use a shadow, keep it small and neutral, and don't combine it with a border and a coloured fill.