Stage Card

A column-header / stage primitive for kanban boards, sales pipelines, roadmap quarters, and workflow milestones. Renders an intent-tinted border, a faintly intent-tinted body, an optional item-count pill, and an optional completion bar — the pattern dashboards previously hand-rolled per column.

Basic Usage

<x-wirekit::stage-card label="Backlog">
    <x-wirekit::card><x-wirekit::card.body>Draft onboarding email</x-wirekit::card.body></x-wirekit::card>
    <x-wirekit::card><x-wirekit::card.body>Spec the billing page</x-wirekit::card.body></x-wirekit::card>
</x-wirekit::stage-card>

Intents

The border and body tint pull from the matching design token. neutral is the default:

<x-wirekit::row gap="md" wrap>
    <x-wirekit::stage-card label="Backlog" intent="neutral" count="8" />
    <x-wirekit::stage-card label="In progress" intent="info" count="3" />
    <x-wirekit::stage-card label="In review" intent="warning" count="2" />
    <x-wirekit::stage-card label="Done" intent="success" count="14" />
    <x-wirekit::stage-card label="Blocked" intent="danger" count="1" />
</x-wirekit::row>

Count Pill

Pass count to show an item count in the header. The pill announces as "N items" to screen readers:

<x-wirekit::stage-card label="In progress" intent="info" count="12">
    <x-wirekit::card><x-wirekit::card.body>Implement the export endpoint</x-wirekit::card.body></x-wirekit::card>
</x-wirekit::stage-card>

Progress

Pass progress (0–100) to render a thin completion bar colored to match the stage intent:

<x-wirekit::row gap="md" wrap>
    <x-wirekit::stage-card label="Q1 — Foundations" intent="success" :progress="100" />
    <x-wirekit::stage-card label="Q2 — Launch" intent="info" :progress="60" />
    <x-wirekit::stage-card label="Q3 — Scale" intent="neutral" :progress="15" />
</x-wirekit::row>

Pipeline Composition

Combine count, progress, and slotted items for a full pipeline stage:

<x-wirekit::stage-card label="Negotiation" intent="warning" count="4" :progress="45">
    <x-wirekit::card><x-wirekit::card.body>Acme Corp — $48k</x-wirekit::card.body></x-wirekit::card>
    <x-wirekit::card><x-wirekit::card.body>Globex — $22k</x-wirekit::card.body></x-wirekit::card>
</x-wirekit::stage-card>

Props

Slots

Accessibility

• When label is set, the card is a role="group" with aria-label="{label}", so the stage title is announced as the purpose of its grouped items.
• The count pill carries aria-label="{count} items" — the number is announced with its unit, not as a bare integer.
• The border color is decorative; the label text is the accessible name, so the stage is distinguishable without color perception.

Keyboard Interaction

Stage Card is a presentational container — it has no interactive behavior of its own. Any interactive children (cards, buttons, links inside the default slot) own their own keyboard model.

Pitfalls

• Don't rely on the border color alone to convey the stage. Always pass a label — color is a redundant cue, not the primary signal.
• progress is a display value, not a control. It mirrors a server-computed percentage; it isn't a slider. Pass an integer 0..100.

Design Tokens

Usage & Conventions

Prop conventions — this component uses the shared semantic prop name intent. See Prop naming conventions for the canonical vocabulary, alias matrix, and decision tree.