Skip to content
UX Atlas
Plate CMP·022 · ComponentGrid E2 · Rev. 2026-08-14

Card

A container that groups content about one object, and the most over-applied component in modern UI.

ComponentCraft conventionFoundational

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.

On this plate
  1. 1Definition
  2. 2When a card is the wrong choice
  3. 3Consistency requirements
  4. 4Deciding how a card behaves
  5. 5In practice
  6. 6Local chart
  7. 7Continue from here

Reach for this when

  • Grouping content about independent objects.
  • Grids of comparable items with mixed content types.

Common mistakes

  • Cards used for everything.
  • Nested interactive elements.
  • Inconsistent padding or content order.

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.

Deciding how a card behaves

Card holdsBehaviourRequirement
One destinationThe whole card is a linkOne anchor, with the title as its text
A destination and secondary actionsTitle links, actions sit above itThe actions need their own accessible names
No destination at allNot interactiveThen it must not look pressable
A selectionThe card is a label for a controlA real checkbox or radio underneath

In practice

  1. i.

    The card with four links inside it

    Nested interactive elements

    A whole-card link containing a tag link, an author link and a bookmark button produces overlapping targets, unpredictable middle-click behaviour and four confusing stops for a keyboard user. One primary link, with the rest layered above it, is the pattern that works.

  2. ii.

    Cards as the default container

    When they cost more than they give

    A page of eleven cards, each with a border and a shadow, groups nothing because everything is grouped. Cards are a strong grouping signal, and their strength depends on being used sparingly.

Local chart

CMP·022 · Region III · Grid E2

This entry and the entries it is stated to connect with. Each line is labelled with what the connection means.

Common RegionFND·006 · PRINCIPLES BEHIND THISContainersFND·041 · PRINCIPLES BEHIND THISDensityFND·016 · PRINCIPLES BEHIND THISElevationFND·048 · PRINCIPLES BEHIND THISGridsFND·039 · PRINCIPLES BEHIND THISShadowsFND·049 · PRINCIPLES BEHIND THISShapeFND·046 · PRINCIPLES BEHIND THISSimilarityFND·005 · PRINCIPLES BEHIND THISAvatarCMP·024 · OFTEN USED WITHLinkCMP·002 · OFTEN USED WITHData TableCMP·025 · ALTERNATIVE APPROACH

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

A DashboardA Pricing PageA Search ExperienceAn Ecommerce Experience

Principles behind this

The reasoning this solution is an application of.

Often used with

These usually appear in the same screen or the same decision.

  • AvatarCMP·024 · Component
  • LinkCMP·002 · Component

Alternative approach

A different answer to the same problem, with a different cost.

  • Data TableCMP·025 · Component

    Tables compare across records. Cards suit one record at a time on small screens.