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 a dashboard would otherwise hand-roll per column.

Basic Usage

Plain stage card

Backlog

Draft onboarding email

Spec the billing page

<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:

Stage cards across intents

Backlog

In progress

In review

Done

Blocked

<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. Screen readers hear it with its unit, "3 items":

Stage card with count

In progress

Implement the export endpoint

<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:

Stage card with progress

Q1 — Foundations

Q2 — Launch

Q3 — Scale

<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:

Full pipeline stage

Negotiation

Acme Corp — $48k

Globex — $22k

<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

Prop	Type	Default	Description
`label`	`string\|null`	`null`	Stage title rendered in the header. Also the `aria-label` of the group.
`intent`	`string`	`'neutral'`	Border + tint color: `primary` / `accent` / `success` / `warning` / `danger` / `info` / `neutral`. `primary` and `accent` resolve to `--color-wk-accent` and `info` to `--color-wk-info-tone`, which is the accent until you give info a color of its own.
`count`	`int\|string\|null`	`null`	Item count rendered as a header pill (announced as `"N items"`).
`progress`	`int\|null`	`null`	Completion percentage `0..100`; renders a thin intent-colored bar.
`scope`	`string\|null`	`null`	Personalization scope key.

Slots

Slot	Description
default	The stage's items (cards, rows, anything). Stacked vertically with a small gap.

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 shows the number and reads it with its unit from hidden text, "1 item" or "3 items", in the language of the page. The number itself is hidden from screen readers, so it is not read twice.
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

Token	Usage
`--color-wk-bg-elevated`	Body background (mixed with 6% of the intent color).
`--color-wk-border`	Card border.
`--radius-wk-lg`	Card corner radius.
`--color-wk-success` / `--color-wk-warning` / `--color-wk-danger` / `--color-wk-accent` / `--color-wk-text-muted`	Intent border + tint source.

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.

Stage Card

Was this page helpful?