Skip to main content

Home Page Patterns Card layout

Card layout

A grid of equal-sized cards holding repeating content.

A card layout shows a list of items as a uniform grid — products, articles, profiles. Each card has the same shape and structure, so the eye can skim a page of them quickly.

3 to 4 columns desktop, 2 tablet, 1 mobile is a safe default. Keep card heights equal even when content varies; let the longest title or the longest description set the height for the row.

Related terms