Digital era · 2012–present
Card UI
Every piece of content gets its own contained, floatable card — a reusable atomic unit that works in grids, lists or as overlays.
Live preview base style — press Wear
$2,100
Revenue, up 12% from last month.
| Customer | Plan | Status | MRR |
|---|---|---|---|
| Northwind | Studio | Active | $1,240 |
| Acme Labs | Team | Trial | $0 |
| Kaldi Coffee | Studio | Active | $860 |
Use this style 16 tokens
- --bg
oklch(93.5% 0.006 240) - --fg
oklch(18% 0.012 260) - --muted
oklch(52% 0.01 250) - --surface
oklch(100% 0 0) - --surface-2
oklch(96.5% 0.006 240) - --border
oklch(88% 0.008 240) - --accent
oklch(54% 0.19 255) - --accent-fg
oklch(100% 0 0) - --focus
oklch(54% 0.19 255)
| Token | Value |
|---|---|
| --font-body | 'Roboto', system-ui, 'Helvetica Neue', sans-serif |
| --font-display | 'Roboto', system-ui, 'Helvetica Neue', sans-serif |
| --font-mono | ui-monospace, 'Roboto Mono', monospace |
| --radius | 8px |
| --radius-sm | 4px |
| --shadow | 0 1px 3px oklch(0% 0 0 / 0.12), 0 0 1px oklch(0% 0 0 / 0.06) |
| --shadow-lg | 0 4px 14px oklch(0% 0 0 / 0.18), 0 1px 4px oklch(0% 0 0 / 0.1) |
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
:root {
--bg: oklch(93.5% 0.006 240);
--fg: oklch(18% 0.012 260);
--muted: oklch(52% 0.01 250);
--surface: oklch(100% 0 0);
--surface-2: oklch(96.5% 0.006 240);
--border: oklch(88% 0.008 240);
--accent: oklch(54% 0.19 255);
--accent-fg: oklch(100% 0 0);
--focus: oklch(54% 0.19 255);
--font-body: 'Roboto', system-ui, 'Helvetica Neue', sans-serif;
--font-display: 'Roboto', system-ui, 'Helvetica Neue', sans-serif;
--font-mono: ui-monospace, 'Roboto Mono', monospace;
--radius: 8px;
--radius-sm: 4px;
--shadow: 0 1px 3px oklch(0% 0 0 / 0.12), 0 0 1px oklch(0% 0 0 / 0.06);
--shadow-lg: 0 4px 14px oklch(0% 0 0 / 0.18), 0 1px 4px oklch(0% 0 0 / 0.1);
}Where it came from
Origin: Google+ and Pinterest grid layouts, circa 2011–2012
Pinterest's masonry grid popularised the card pattern for image-heavy content around 2011. Google+ adopted it for posts. Google's Material Design formalised the card as a design primitive in 2014. Cards spread to dashboard UIs, Trello's Kanban boards, Notion databases, and virtually every SaaS product through the late 2010s. Their ubiquity is now both their strength and their problem.
How to spot it
- Rectangular or rounded-rect containers with a drop shadow
- Self-contained: each card has its own title, body and action area
- Consistent padding and radius across all cards in a view
- Can stack, drag, resize or nest — a flexible atomic unit
Trade-offs
| Strengths | Weaknesses |
|---|---|
| Content can be reordered, filtered and paginated cleanly | Overuse fragments information that would be clearer in a table |
| Familiar pattern — users know how to interact with cards | Card-inside-card nesting becomes visually indistinguishable |
| Maps cleanly to data models | Drop shadows on every element create visual noise |
In the wild
- Trello Kanban board
- Google Material component docs
- Notion database gallery view
Use it when
Collections of discrete items — projects, articles, products — that users browse, sort or act on individually.