ComponentsCard

displaytexulinot agent-emittableapp

Card

card

A surface for grouping related content with optional link behavior.

Live examples

Elevated card

Elevated card

Loading demo…

Linked card

Linked card

Props

Public props for Card
NameKindRequiredDefaultDescription
variantenum (elevated, flat)no"elevated"Visual elevation
hrefstringno—Optional link target (URL policy)
hrefTrustenum (developer, untrusted)no"developer"—
linkLabelstringno—Accessible name when the card is a link
classstringno—Extra classes

Keyboard

Keyboard behavior for Card
KeyAction
aWhen href is set, the card is a real link with an accessible name
aRejected href schemes render as a non-interactive surface

Accessibility

  • When href is set, the card is a real link with an accessible name
  • Rejected href schemes render as a non-interactive surface

Evidence for card

Latest committed gates for card (as of 2026-10-23). Static snapshot — not live CI.

Behavior

n/ano behavior scenario

No dedicated behavior scenario for this catalog id (a styled or display surface, covered by its unit and axe tests).

Size (gzip)

texuli/card · budget 12.0 KiB

Budget from texuli.budgets.json; re-measure with `pnpm size --filter <entry>`.

Axe

documented

  • tests/e2e/site-component-pages.spec.ts
  • docs/quality (a11y-*)

Site component pages axe gate; package-level a11y docs under docs/quality when present.

Browsers

  • chromium
  • webkit
  • mobile

Playwright projects: Desktop Chrome, Desktop Safari, Pixel 7. Firefox is a known gap on this host.

When to use

Use when

  • Group related content in a bordered surface
  • Make a whole tile a single link

Don’t use when

Prefer another component

  • A single line of chrome (use badge or button)
  • A data grid of many rows (use table)