Card
卡片
Aliases:卡片卡片容器信息卡内容卡片卡片式布局商品卡片一块一块的内容板
What is it
A self-contained rectangular container outlined by rounded borders or a surface colour, aggregating related content: cover, title, excerpt and actions. The universal display unit of content feeds, dashboards and commerce lists.
Interactive playground
Try it. Make an informed choice.Explore the title, content and actions across card layouts.
Loading lab…
What to look for
- 01Avoid nested links when the entire card is clickable.
- 02Separate title, supporting information and actions clearly.
✓ When to use
- Feed items with cover, title and excerpt
- Side-by-side metric summaries on a dashboard
- Clickable aggregate entries (product, article, project)
✕ When not to use
- Row-aligned comparison matters — use a table
- Very high-density data — use a table
- Purely decorative wrapping dilutes content — prefer whitespace
Variants
Basic
基础
Border or surface plus content, the general case
Media
带封面
Top image above a content area
Actionable
可点击
Whole card clickable with hover lift or border emphasis
Implementation
border-radiusbox-shadowborderaspect-ratioCard = container (radius, border or shadow) + padding + optional sections (media, content, actions). For a clickable card wrap it in an a or button and give hover feedback (border colour or slight lift); fix the media area's aspect-ratio to prevent layout shift after images load.
Platform API
<article>Compare
Full comparison →Related concepts
A two-dimensional grid aligning data in rows and columns — one record per row, one field per column — built for column-by-column comparison, sorting and high-volume browsing. Rows highlight on hover and support selection; column headers usually carry sort controls.
ComponentsAlternativeA layout language that packs the interface like a bento box: rounded tiles of varying spans snap to one grid with narrow gutters — big cells carry the hero content, small cells hold stats and garnish. A card-grid upgrade where area itself encodes priority.
StylesUsed withOn hover, a card or button lifts slightly (translateY -2–6px) while its shadow deepens — as if raised by an invisible hand. The most common desktop affordance for "this is clickable": nearly free, instantly adds depth and life.
MotionUsed withA small status marker attached to an element's corner or inline: a dot, a count or a short label. It signals unread counts, status (new, deprecated) or category; non-interactive and visually subordinate to its host element.
ComponentsSimilar