Cards templates

4 templates

Cards are where most design systems start, and where most of them first go wrong — a card that looks right in a row of three and collapses badly at 400 pixels. These are built mobile-first.

Cards break in two predictable places

A card that looks right in a row of three on a desktop and falls apart at 380 pixels, and a row of cards whose buttons no longer line up because one product name wrapped to two lines. Both are layout problems with one-line fixes, and both are everywhere.

Uneven content. Make the card a flex column and give the body flex: 1. The body absorbs the difference, so the footer or button sits at the bottom regardless of how long the title is. This is the same technique as a sticky footer, applied inside a component.

Images that arrive late. Set aspect-ratio on the image and put width and height attributes in the markup. The browser reserves the right space before the file downloads, so the grid does not jump — which is exactly what Cumulative Layout Shift measures.

Do not wrap the whole card in a link

It is tempting, and it produces a link whose accessible name is the entire card — title, price, rating, description and button text read out as one enormous string. It also makes any secondary link inside the card unreachable, because links cannot nest.

Link the title and the image instead. If you want the whole card clickable, stretch a pseudo-element from the title's anchor across the card and raise any other interactive element above it with position: relative.

The grids here use repeat(auto-fill, minmax(230px, 1fr)), which reflows on its own at every width with no breakpoints to maintain. There is more on that in the responsive grid recipes.

Other categories