UI components · Data display
Card
Also called: Panel, Tile, Content card, Info card
A self-contained rectangle with a border or shadow that groups a related image, title, description, and actions into one unit.
Click “Labeled” to see what each part is called, or “Anti-pattern” to see the most common mistake.
How to tell AI
Swap in your own content firstShow courses in a card grid: 3 per row on desktop, 2 on tablet, 1 on mobile, with 24px gaps. Cards have a white background, 8px rounded corners, and a light shadow. On top, a 16:9 cover image. Below it, a title of at most two lines, the instructor, and the price, with a "Start learning" button at the bottom. On hover, lift the card slightly and deepen the shadow. Make the whole card clickable.
Send to
01Decide
Does your content look like this?
Check both columns to confirm Card is what you need.
Use Card when
- Items that are mainly visual, like cover images or product photos, where users pick by looking
- Not too many items (a dozen or so per screen), each fairly independent, with no need to compare field by field
- Dashboards or home pages where several blocks of info on different topics each need their own section
- Items whose structures differ, like some with images and some without, which are hard to line up in columns
Pick something else when
Uniform items in large numbers that need field-by-field comparison or sorting
Use insteadTableItems with just a title and a line or two of text, where users need to scan lots of them quickly
Use insteadListA page with only one main block of content, where wrapping it in a card just adds a pointless border
Use insteadArticle Layout
Not sure? Upload a screenshot and page analysis will check which layout each block should use.
02Pitfalls
Common misuse
It looks like it works, but it makes things harder for users.
- 01
Turning hundreds of similar records into big cards, so only a few fit on screen and nothing can be compared by field
The wireframe below shows this case. The red dashed box marks the problem.The wireframe on the right shows this case. The red dashed box marks the problem.
- 02
Nesting cards inside cards, so borders and shadows stack up into visual clutter
- 03
Cramming every field and several buttons onto each card, which defeats the point of picking at a glance
03Spot it
How to spot it
Look at the overall structure first, then check a few features you can spot at a glance.
Structure
A container with a border or shadow, usually split into a cover image area, a title and body area, and an action area at the bottom. It can also be just a title and content.
PartsClick one to highlight it in the wireframe above
04Explained
In detail
A card is a rectangular container with a border, rounded corners, or a shadow, holding a set of info about one topic. A common layout is a cover image on top, a title and short description in the middle, and action buttons at the bottom. Arrange several cards in a grid and you get familiar pages like product listings, recommended articles, and course catalogs. Each data module on a dashboard is often wrapped in a card too.
Cards stand out visually and each one is self-contained, which suits image-heavy content in small numbers that users pick through one at a time. The downside is that they take up space and their fields don't line up. When items are uniform, numerous, and need field-by-field comparison, use a table. When each item is just a title and a description and needs compact browsing, use a list.
Keep the info on a card lean. Only include what helps users decide whether to click in, and leave the full details to the detail page.
Developer infoTerm ID, DOM cues, match priority
- Term ID
component-card- DOM selectors
The extension matches these CSS selectors when it inspects a page locally (tags, ARIA roles, common component library classes).
.card.ant-card.el-card[class*="MuiCard-root"].arco-card.t-card.n-card[data-slot="card"]
- Priority
- 1 · when several match at the same level, the higher priority wins
- Version
- v2 · updated Sep 29, 2026