Card
A container that groups content about one object, and the most over-applied component in modern UI.
Definition
A card groups related content about a single entity into a bounded region. It works through common region, which makes it a strong grouping signal and a heavy visual element.
Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.
When a card is the wrong choice
- For a list of similar rows, where dividers are lighter and allow more density.
- For a single item, where the boundary adds nothing.
- For content that needs to be compared, where a table aligns attributes better.
- When every element on the page is already a card, at which point the grouping signal is exhausted.
Consistency requirements
- Identical internal padding across a set, or the grid stops reading as a grid.
- The same content in the same position in every card, so scanning is a single sweep.
- A defined behaviour for missing optional content, so cards do not collapse unevenly.
- Equal heights within a row, with a defined truncation rule for long text.
Continue from here
Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.
Applies when you are designing
Principles behind this
The reasoning this solution is an application of.
- Common RegionUI foundation
- ContainersUI foundation
- DensityUI foundation
- ElevationUI foundation
- GridsUI foundation
- ShadowsUI foundation
- ShapeUI foundation
- SimilarityUI foundation
Often used with
These usually appear in the same screen or the same decision.
Alternative approach
A different answer to the same problem, with a different cost.
- Data TableComponent
Tables compare across records. Cards suit one record at a time on small screens.