Card

Card — a 64 icon box, the title at 22 Medium on the web (18 on mobile, 26 on a slide), an optional grey subtitle band, the white slot at radius 8, and the accent head block of Filled header.

Beta · Content blocks · packages/css/src/components/card.css · React on Base UI: @pepperui/card

.pui-card · style --plain --border --soft --colour --filled-header · --lined --raised · data-sequence · __media __header __head __icon __texts __logo __title __description __action __band __slot __footer. The accent is data-accent on the card or a parent.

Card — every size and every stateOpen in the workshop

Sizes across, states down.

What it is for

• Style basic / plain / border / soft / colour / filled-header; 368 wide for the specimen (473 on a 1792 slide), fill it to the grid in use; height hugs
• Anatomy in order: Media (an image slot) — Header: Icon box 64 with a 32 glyph (accent with an on-accent glyph; white with an accent glyph on colour and filled-header) · Title · Action (an Icon button - ghost) — Band: Subtitle on card/band — Slot (the body on surface/slot; unfilled under a filled header; its Content is a swap — Card slot by default, Card text for a sentence, a Bullet list for check rows — because an instance cannot take new children) — Footer (a Button group). Each part is a Has … boolean; Title and Subtitle are text; Icon swaps the glyph; Content swaps the slot’s body
• Padding space/20 and gap space/12; nested blocks radius/8 inside radius/16
• Colour, soft and filled-header read accent/main · accent/bg · on-accent — set the Accent mode on the instance (blue / red / yellow / multicolor); yellow ink is the token’s, not an override
• Type is the Typography roles — Title on body/large’s size (22 · 18 · 26) at the Medium weight, Subtitle body/medium (18 · 16 · 20) — so a card scales with the canvas mode
• Lined true — a 2 px border/default line on a TINTED finish (basic, soft, colour): The design lead’s Echo AI contact card, kept over the kit’s lineless tints — ‘the form is mixing with the background’ (request 18); the white finishes keep --border’s 1 px
• Raised true — the tinted card with no line, lifted by elevation/card: a card on a white page (the form card on Contact and the gated case study, request 34). Never with Lined or border — a line and a shadow together is the anti-pattern
• The icon box on a ground the accent paints — soft, colour, filled-header — is white (surface/slot) and its glyph is accent/text: the accent on blue and red, the ink on yellow, where accent/main on white was yellow on white (requests 27 and 36)
• One card names its step in the six-step sequence: bind the Icon box to sequence/1…6 and the glyph to text/on-accent — white on every step, yellow included. In code data-sequence=“1…6” on the card; a row in multicolor still colours by position (request 35)
• The card as a link — a blog post, a case study, a team member: Style border, Media, then the Header with a logo (125 × 30 on a 35 line), the Title and a line under it at body/medium Regular, a small Badge space/8 under them, and the Action (Icon button - round, small, arrow-up-right) at its end on the base line. It lifts on hover (elevation/card, space/4 up) and the arrow steps out. No component per content type — one pattern built from the Card (request 41)
• A card that holds a Form takes the form’s inset — space/32, space/24 on a phone — in one of three finishes: Lined, Raised or plain (request 34)

Use when content needs its own edges — a feature on a slide, a dashboard panel, a stat, a form, a post preview.

Do not use when the content is a single line (Alert, Badge, a row); the card would hold one number and a delta (KPI tile); it interrupts and needs an answer (Dialog, Alert dialog); every item on the page is already a card (then none should be).

Relates to Card text, Card slot, KPI tile, Insight block, Icon list, Bullet list, Dialog, Button group, Icon button, Chip, Table, Aspect ratio (the media slot’s box).

Anti-patterns a card inside a card with the same fill · a border and a shadow together (Raised is the shadow alone) · a colour card whose ink was set by hand instead of the Accent mode · rounded 16 outside and rounded 16 inside · a footer of three buttons · a title in Regular · a card with nothing in the slot shipped as a design.

Keywords: card, panel, tile, surface, container, box, dashboard card, stat card, feature card, icon card

Card slot and Card text are the Figma stand-ins for children — the Content swap’s default and its text body; they have no code side

Figma — page Card: Card (10 variants) · Card slot (1 variants) · Card text (1 variants)

shadcn: card

The markup — copy this

The class, the parts, and nothing that is not in the package. The same block opens card.css.

<div class="pui-card">
  <div class="pui-card__media"><img src="…" alt=""></div>
  <div class="pui-card__header"><span class="pui-card__icon"><span class="pui-icon pui-icon--32">…</span></span>
    <div class="pui-card__texts"><h3 class="pui-card__title">Supply-path optimisation</h3></div>
    <button class="pui-icon-button pui-icon-button--ghost pui-icon-button--small pui-card__action" aria-label="More">…</button></div>
  <div class="pui-card__band">When to scale or slow down</div>
  <div class="pui-card__slot">…</div>
  <div class="pui-button-group pui-card__footer">…</div></div>
<div class="pui-card pui-card--filled-header"><div class="pui-card__head"> …the header parts… </div> …</div>

The modifiers

	What it is	Note
Style	(none) basic · --plain · --border · --soft · --colour · --filled-header	—
Lined	--lined — a 2 px border/default line on a tinted finish (basic, soft, colour); --border is the white card’s 1 px	—
Raised	--raised — a tinted card with no line, lifted by elevation/card: a card on a white page (the form card, request 34)	—
Link	an <a> or a <button> that IS the card: it lifts on hover, its Action steps out, the header sits on its base line, the title and the line under it are body/medium Regular; __logo is a mark over the title (request 41)	—
Form	a card that holds a .pui-form takes the form’s inset — space/32, space/24 on a phone (request 34)	—
Accent	set data-accent on the card or a parent (blue / red / yellow / multicolor) — soft, colour and filled-header follow it; yellow’s ink is the token’s, never a hand override	—
Sequence	a row of cards in multicolor colours its icon boxes by position, sequence/1…6 (request 5); ONE card names its step with data-sequence=“1…6” (request 35). The glyph is white on every step, yellow included	—
Canvas	the title and band scale with data-canvas — 22 / 18 on the web, 26 / 20 on a slide	—

Accessibility — measured, not assumed

Every number here is measured on the rendered component: contrast (npm run contrast:render), the focus ring (npm run focus) and the keyboard (npm run keyboard). The floors are principle 12’s.

Contrast

ink on ground	reads	floor	the matrix calls it
#ffffff on #e42521	4.57	4.5	Danger button label (promised)	ok
#544d4d on #e9e9fb	6.87	4.5	Muted ink on the tint (promised)	ok
#544d4d on #ffffff	8.24	4.5	text.muted on surface.page (promised)	ok
#ffffff on #2b25d9	8.86	4.5	Data label on a series (promised)	ok
#0b0202 on #f9c426	12.65	4.5	Data label on a series (promised)	ok
#0b0202 on #dad9d9	14.56	4.5	Card band text (promised)	ok
#0b0202 on #e9e9fb	17.1	4.5	KPI value, blue tile (promised)	ok
#0b0202 on #fce9e8	17.54	4.5	KPI value, red tile (promised)	ok
#0b0202 on #f2f2f7	18.38	4.5	text.default on surface.card (promised)	ok
#0b0202 on #ffffff	20.51	4.5	text.default on surface.page (promised)	ok
… 1 more pair(s)

11 distinct pair(s) rendered, 0 that axe calls a violation.

The focus ring

primitive	on	the indicator	over	the change
Card - link	surface/page	shadow #6a66e4 2 px	#ffffff	4.53	ok
Card - link	surface/card	shadow #6a66e4 2 px	#f2f2f7	4.06	ok
Card - link	surface/sunken	shadow #6a66e4 2 px	#f2f2f2	4.05	ok

6 of 6 focus stop(s) in this block meet WCAG 2.4.13 on screen — the same crop screenshotted focused and unfocused, and the difference measured.

Keyboard

Nothing in this component claims an ARIA role with a keyboard contract; its controls are ordinary ones and the browser already gives them their keys.

Tab order across the whole library is document order over 344 stops, and Shift+Tab is its exact reverse — no keyboard trap anywhere (WCAG 2.1.2).