i

Card

Organising content · researched

A container grouping related content and actions about one subject.

molecule · Carbon: Tile · also called Tile, Card · contains heading, button

Carbon has both Tile (stable) and Card (experimental); "Card" is used by six other systems and Carbon's own newer component.

Each block is the real component from that system’s own package, in an isolated frame. They are live: hover, focus and press them. Frames are drawn on white so systems compare on one ground, and a font a system licenses only for its own site (GOV.UK’s Transport) falls back to what the system itself specifies.

Ant Design

Card native: no antd 6.6.5
Variants
outlined, borderless
Sizes
medium, small
States documented
default, hover, loading
Accessibility guidance
no

Div-based container. type=inner for nested cards; Card.Grid and Card.Meta sub-components.

1 corrected on re-read
  • states_documented: ["loading"] → ["default","hover","loading"] card.md documents loading prop and hoverable (lift on hover); original omitted hover

docs ↗ · code ↗

Carbon

Card native: partly @carbon/react 1.117.0
Variants
productive, expressive, clickable, horizontal
Sizes
—
States documented
hover, focus, active, disabled
Accessibility guidance
yes

Storybook/repo docs only, and exported as preview__Card in 1.117.0; the docs site has no Card page and documents Tile (base, clickable, selectable, expandable) as its card-like container. Card renders a div, or an a element via as=a; the variants are the density values and props named in Card.mdx. No accessibility section read.

1 corrected on re-read
  • a11y_documented: "no" → "yes" Card.mdx Clickable cards: must have aria-label/aria-labelledby; no dedicated a11y heading

docs ↗ · code ↗

GOV.UK

Summary list (summary cards) subset native: no govuk-frontend 6.5.1
Variants
—
Sizes
—
States documented
default
Accessibility guidance
no

No general card. Summary cards are a documented option of Summary list: a titled bordered container (div) holding one summary list, with optional card actions.

1 corrected on re-read
  • alias_kind: "contested" → "subset" Page: 'Summary cards are a variant within this component'; card holds only a summary list, no general card

docs ↗ · code ↗

Material Web

absentMaterial Web does not ship this component. Nothing is drawn in its place.

Checked docs/components (22 files: button, checkbox, chip, dialog, divider, elevation, fab, focus-ring, icon-button, icon, list, menu, progress, radio, ripple, select, slider, switch, tabs, text-field), the repo top-level and labs directories, and docs/roadmap.md. Card is listed under unbuilt components in the roadmap. Undocumented experimental source exists in labs/card (elevated, filled, outlined card) and labs/gb/components/card, with no docs page, so it is not counted as shipped.

Primer

Card native: no @primer/react 38.40.1
Variants
—
Sizes
—
States documented
default
Accessibility guidance
yes

Marked experimental on its docs page. Renders div (or section via as). Props: layout (default, compact) and padding (normal, condensed, none); no named visual variants.

docs ↗ · code ↗

Spectrum

Card native: no @spectrum-web-components/button 1.12.4
Variants
primary, secondary, tertiary, quiet
Sizes
XS, S, M, L, XL
States documented
—
Accessibility guidance
yes

Variants and sizes from the React Spectrum (rsp) Card.json; the page has no states fragment. Native check: S2 Card renders divs (a nested Link when href is set) and SWC 2nd-gen card is a div with a footer element, with no spectrum.adobe.com swc page for it.

docs ↗ · code ↗

USWDS

Card native: no @uswds/uswds 3.14.0
Variants
.usa-card--flag, .usa-card--header-first, .usa-card--media-right, .usa-card__media--inset, .usa-card__body--exdent, .usa-card__footer--exdent, .usa-card__header--exdent, .usa-card__media--exdent
Sizes
—
States documented
default
Accessibility guidance
yes

Template is a ul of li items containing div, h2 and img; no native card element exists.

1 corrected on re-read
  • builds_on_native: "partly" → "no" Twig renders ul.usa-card-group > li.usa-card > div/h2/img; no native card element

docs ↗ · code ↗

Platform facts

Native elementarticleNo card element, role or APG pattern. The only primary source naming a card is the MDN article page, which lists 'a product card' among examples of a self-contained composition; the spec article definition ('complete, or self-contained, composition ... independently distributable or reusable') does not. So article is a candidate host only for cards that are self-contained items; a card used as a layout container is not covered. APG Disclosure has a 'Disclosure (Show/Hide) Card' example, which concerns expanding a card, not what a card is.
Baseline—
APG patternnone
ARIA role—
Shipped by6 of 7 systems

Anatomy

    The seven states

    default A card is a container.
    hover Inference, no source: hover on a card is a design-system CSS concern.
    focus n/a — A container is not focusable unless made interactive.
    active n/a — Not defined.
    disabled n/a — Not defined.
    error n/a — Not defined.
    loading n/a — Not defined.

    Every cell was read twice, the second time from raw sources by a separate pass. 4 of 35 fields changed on the second read — open any “corrected” note to see what it said before.