Card | Fragments

Preview

<Card>
  <Card.Header>
    <Card.Title>Card title</Card.Title>
    <Card.Description>A brief description</Card.Description>
  </Card.Header>
  <Card.Body>Related content</Card.Body>

Installation

npx @usefragments/cli add card

Writes src/fragments/ui/components/Card plus what it imports, the globals stylesheet, and .fragments/registry-lock.json, then prints the packages to add. No account, no key.

Your own registry: publish from Fragments Cloud and add --registry org/name. Connect a workspace.

Anatomy

Card is a compound: import the root and reach its parts through dot notation.

Card.Header
Card.Title
Card.Description
Card.Body
Card.Footer

Quiet surface with a title and description.

<Card>
  <Card.Header>
    <Card.Title>Card title</Card.Title>
    <Card.Description>A brief description</Card.Description>
  </Card.Header>
  <Card.Body>Related content</Card.Body>
</Card>

Examples

Content Only

Body alone, when there is nothing to title.

<Card>
  <Card.Body>Just content, no header or footer.</Card.Body>
</Card>

With Footer

Footer parks the actions below the content.

<Card>
  <Card.Header>
    <Card.Title>Card with footer</Card.Title>
    <Card.Description>Complete card layout</Card.Description>
  </Card.Header>
  <Card.Body>Main content area.</Card.Body>

Panel

Divided header; the body owns its own spacing.

<Card variant="soft" padding="none">
  <Card.Header divided>
    <Card.Title>Overview</Card.Title>
  </Card.Header>
  <Card.Body padding="md">Panel content</Card.Body>
</Card>

Accent

Earned-moment capsule: accent hairline and wash, for the few surfaces that deserve emphasis.

<Card variant="soft" tone="accent" padding="lg">
  <Card.Header>
    <Card.Title>Finish setting up governance</Card.Title>
    <Card.Description>Run the first scan to start tracking drift.</Card.Description>
  </Card.Header>
</Card>

Danger Tone

The same capsule carrying state: the wash and hairline follow the tone.

<Card variant="soft" tone="danger">
  <Card.Header>
    <Card.Title>Merge held</Card.Title>
    <Card.Description>Two blocking findings need a decision.</Card.Description>
  </Card.Header>
</Card>

Interactive

onClick adds keyboard and button behaviour to the whole surface.

<Card as="section" onClick={() => undefined}>
  <Card.Header>
    <Card.Title>Open details</Card.Title>
    <Card.Description>This card is interactive</Card.Description>
  </Card.Header>
  <Card.Body>Activate the card to view more.</Card.Body>

Section Root

The as prop matches the surrounding document semantics.

<Card as="section" aria-labelledby="billing-card-title">
  <Card.Header>
    <Card.Title id="billing-card-title">Billing summary</Card.Title>
  </Card.Header>
  <Card.Body>Section semantics support the surrounding document outline.</Card.Body>
</Card>

Nested Heading

Pick the heading level the page outline expects.

<Card variant="soft" padding="none">
  <Card.Header divided>
    <Card.Title as="h4">Nested panel</Card.Title>
  </Card.Header>
  <Card.Body padding="md">Panel content</Card.Body>
</Card>

Long Content

Long titles and dense text wrap without breaking the surface.

<Card>
  <Card.Header>
    <Card.Title>
      A detailed localized account recovery policy for administrators across multiple
      workspaces
    </Card.Title>

API

Component props
Prop	Type	Default	Description
`as`	`enumarticledivsection`	`article`	Root element tag.
`children`Required	`node`	Not set	—
`padding`	`enumnonesmmdlg`	`md`	Inner padding.
`style`	`object`	Not set	—
`tone`	`enumneutralaccentwarningdanger`	`neutral`	Earned-moment capsule. Any tone other than `neutral` paints a tone-tinted hairline, a radial wash and the capsule radius on top of the variant: `accent` (the moment), `danger` (a merge is held), `warning` (enforcement lapsed). Reserve it for the few surfaces that earn emphasis.
`variant`	`enumsolidsoftoutline`	`solid`	Surface chrome. - `solid`: the filled, elevated surface for general-purpose cards. - `soft`: quiet tint fill for metric tiles and dashboard panels. Add `padding="none"` and let `Card.Header divided` + `Card.Body padding` own their inset for a panel. - `outline`: transparent with a hairline border, for dense layouts.

Accessibility

Card is a semantic container (article/div/section); onClick adds keyboard and role="button" behavior, but explicit Button or Link actions are preferred
Card titles should be appropriate heading levels

Guidance

Use when

Grouping related content behind one boundary
Previews, summaries, and dashboard tiles
Separating sections that spacing alone cannot

Avoid when

Plain text that needs no grouping
Modal surfaces (use Dialog)
Navigation items (use List or Sidebar)

Do not use a Card as a modal surface.

Don’t

<Card>Confirm deletion</Card>

<Card variant="outline">
  <Card.Body>Inline summary</Card.Body>
</Card>

GridparentUse Grid + Card for responsive card layouts
ListalternativeUse List for linear, text-first layouts

Next steps

Accessibility contractThe keyboard, focus and naming rules every component carries.
Every componentThe catalog, grouped by what each component does.