# Card UI

> Every piece of content gets its own contained, floatable card — a reusable atomic unit that works in grids, lists or as overlays.

- Category: Digital era
- Era: 2012–present
- Origin: Google+ and Pinterest grid layouts, circa 2011–2012
- Lesson: https://design.dawit.dev/styles/card-ui
- Try it: https://design.dawit.dev/styles/card-ui?style=card-ui

## Where it came from

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

## Strengths

- Content can be reordered, filtered and paginated cleanly
- Familiar pattern — users know how to interact with cards
- Maps cleanly to data models

## Weaknesses

- Overuse fragments information that would be clearer in a table
- Card-inside-card nesting becomes visually indistinguishable
- 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.

## Related styles
[Material Design](https://design.dawit.dev/styles/material-design.md), [Bento Grid](https://design.dawit.dev/styles/bento-grid.md), [Masonry](https://design.dawit.dev/styles/masonry.md)