Card
A bounded rectangular container that groups related content and actions as a single unit.
Cards collect a heading, supporting content, media, and actions inside a visible boundary. They are the most generic 'container of stuff' in modern UI, used for posts in a feed, products in a grid, dashboards, and almost everything in between. Material Design and most design systems define elevation, padding, and interaction rules for cards. A card is often clickable as a whole, jumping to a detail view.
Also called
content cardtilepanel
When to use
- Lists of similar items that each have multiple pieces of info
- Dashboards built from independent panels
- Feeds where each item bundles a heading, body, and actions
When not to use
- Single-column text pages (just use the page)
- Cards inside cards (creates visual noise)
- Lists where rows would communicate the same thing more efficiently
Related
Source
Material Design ('Cards') is the most-cited reference; the pattern predates Material and exists in virtually every design system (Apple HIG, Atlassian, Shopify Polaris, Shadcn).