Card UI design examples

What is a card in UI design?

A card is a bounded container that holds the information and actions for a single subject. A product card holds an image, a name, a price and a buy button. Because each card stands alone, cards can be laid out in grids, lists and carousels, and rearranged for any screen size without losing meaning.

When should you use cards?

Use cards when users browse items of the same kind and each item has a few pieces of mixed content, such as an image, a title and a price. Do not use them for content people need to compare line by line. A table or a plain list does that better, because cards break the eye's path across rows.

What makes a card well designed?

One clear subject per card, a visible hierarchy with the most important item first, and the same structure across the set. Make the whole card clickable if it leads to one place. If it holds several actions, keep them to two or three, in the same position on every card.

Where do these card examples come from?

Most are card designs published on Layers, with card components from the Framer marketplace, Dribbble and UI8. Muzli follows more than 200 design sources and lists up to 60 matching pieces here, favouring recent work.