Card

A rectangular block that gathers everything about one thing: a photo, a name, a price, a button.

Also called: card, cards, tile, product card, product block, preview, teaser, rectangle with a photo, product grid, grid of items, listing, thumbnail

What it is for

When a page has many similar items, they get identical cards. The photo, price and button sit in the same place on every product, so they’re easier to compare. On desktop, cards usually line up in a grid. On a phone, they stack in one column.

Where you see it

• Marketplaces — the product grid in a catalog
• News sites — article previews with a picture
• Delivery apps — restaurant cards with a rating and delivery time

What it is called in code

• <article class="card">
• Card

See also

• Badge — A small pill or circle with a short word or number: “New”, “−20%”, “3”.
• Star rating — A way to rate something and to show how satisfied people were, usually on a five-point scale.
• Like button — A one-tap way to show you approve of something, or to save it to your own collection.