Library / UI components / Card
No. 010·noun·also called tile, panel

Card

A boxed-off rectangle that groups everything about one item, like a product, a post, or a person.

SPECIMEN · LIVE DEMO
Definition

What it is

A card is a self-contained block holding a single item's key information: often an image, a title, a line or two of detail, and an action. Cards are usually laid out in a grid or a list.

Cards work when people browse many similar items and pick one: listings, products, projects, recipes. Each card should be clickable as a whole or have one clear action.

Don't put cards inside cards, and don't box everything. If the content is a long read rather than one of many items, it doesn't need to be a card.

Say it like a builder

How to ask for it

Vague

“Show each product nicely with the picture and the price.”

Precise

“Show products as cards in a 3-column grid. Each card has the product image on top (square), then the name, the price, and an "Add to cart" button. The whole card links to the product page.”

Why it works

"Nicely" means nothing to a builder; "card" names a contained item block and the prompt sets the grid, content order, and click target.

In the wild

You've seen this in

  • SAirbnb listings in search results
  • PPins on Pinterest
  • TTrello's task cards
Usage note

Often confused with

ModalA modal floats over the page to ask something; a card sits in the layout as one item among many.GridThe grid is how cards are arranged; the card is each item.