Card
A bounded container grouping related content about one thing — useful for scanning, expensive in vertical space.
A card bundles everything about one item into a visually separated block. That works when each item is consumed on its own and carries something visual — a product, an article, a project. It stops working when people need to compare a value across items, because cards put the same field in a different place in each one and force the eye to jump. That job belongs to a data table.
Cards also cost real estate. A list of twenty rows fits on one screen; twenty cards do not. On dense screens that trade is usually a loss. And a card with three separate links plus a whole-card click creates nested interactive regions that are ambiguous to click and hard to navigate by keyboard: pick one primary target and make the rest secondary and explicit.
In practice
A B2B admin listed invoices as cards. Finance staff needed to scan for amounts over a threshold and were seeing nine records per screen with the amount in a different position each time. Switching to a table with a right-aligned amount column showed 35 per screen and cut the stated task time roughly in half.
Where teams get it wrong
- Cards where people compare values across items.
- Whole-card links containing other links, producing ambiguous targets.
- Cards on dense screens, where rows would show three times as many records.
- Variable card heights that break the grid and hide the scan line.
- Cards with a border, a shadow and a background, competing with the content inside them.
( Learn more )
Related terms
All terms- Data TableA grid of rows and columns for scanning, comparing and acting on records — the screen most B2B users spend their day inside.
- Skeleton LoadingPlaceholder shapes matching the layout of content that is still loading, shown instead of a spinner so the page keeps its structure.
- AvatarA small image or initials standing for a person or organisation, used to make ownership and presence scannable.
- BadgeA small, non-interactive marker showing a status or a count.