Card
卡片
A rounded, bordered container that bundles one related piece of content — image, title, text — into a single self-contained unit.
Live Demo
Actually clickableWhat you just saw:The tiled content blocks on an app home screen, article cards on a news site, one square per feature in a settings list, each row of search results.
What it actually is
A card is the most generic layout unit there is. It does not dictate what goes inside: an image, a heading, some copy, a button, all of it is fine. Its value is that it chops a scattered pile of information into blocks that can be clicked and understood on their own.
Anatomy · What it's made of
Surface卡片面
White background + 1px border + a very light shadow
Media图片区
Optional, 16:9 or 1:1
Title标题
Clamped to 2 lines
Description描述
1–2 lines, secondary text color
Action操作区
At the bottom, or the whole card is clickable
When to Use
When it fits, and when it doesn't| Situation | Use it? |
|---|---|
| A group of content can be clicked or understood on its own | Yes |
| It needs a clear click boundary (the whole card is clickable) | Yes |
| A repeated unit inside a grid layout | Yes |
| The content is very short — a single line of text | No |
| You would be nesting a card inside another card | No |
Cards inside cards, or buttons inside buttons, are the classic symptom of a hierarchy that has lost control.
If all you need is a bit of grouping, a divider is enough — no need to promote every group to a box.
Similar Patterns
Don't mix these upCardCurrent
卡片
A rounded, bordered container that bundles one related piece of content — image, title, text — into a single self-contained unit.
List
列表
A single column of stacked items, where every row is the same kind of thing and the whole row is one target.
In one line:A rounded, bordered container that bundles one related piece of content — image, title, text — into a single self-contained unit.
How to tell AI
Three levels of promptAdd the component name and specifics
Add a list of content cards: each card has a 16:9 cover image, a title, a description and a "View details" link. The whole card is clickable and lifts slightly on hover.
Don't just say this to AI
Bad → BetterDon't say this to AI
Add a few boxes to show some content.
Say this instead
Add a card list: white background, 1px border, border-radius 10px, 16:9 cover + title (clamped to 2 lines) + description, whole card clickable (no nested links inside), lifts 2px on hover with a raised shadow.
Share this card
Social-readyTurn this pattern into a 3:4 or 1:1 knowledge card and export it as PNG right in the browser. No backend needed.