Components · Workflow

Kanban board

The pipeline as columns. Each case is a draggable card that moves left-to-right through Intake → Vetting → Placed; every column shows a count pill (and a WIP limit where one applies), cards carry a priority + tag chips and their assignee avatar. One card is caught mid-drag — lifted onto the overlay shadow and tilted — with a dashed drop placeholder marking where it lands in the target column.

case board · 3 columns · one card mid-drag into Vetting
Intake 3
Marmalade

Terrier mix · ~8 mo · F

RC-2307
Priority · Med Bottle baby
Intake Jul 1
Willow

Hound · ~5 yr · F

RC-2301
Priority · Routine Heartworm−
Intake Jun 28
Biscuit

Beagle mix · ~2 yr · M

RC-2291
Priority · Urgent Medical hold
Intake Jun 22
Vetting WIP 2/4 2
Pepper

Lab mix · ~3 yr · M

RC-2288
Priority · Med Dental
Vet Jul 3
Juno

Shepherd · ~4 yr · F

RC-2284
Priority · Routine Spay booked
Vet Jul 5
Placed 2
Odie

Dachshund · ~7 yr · M

RC-2270
Fostered Senior
Foster Jun 20
Sadie

Pit mix · ~2 yr · F

RC-2255
Adopted
Closed Jun 17

Marmalade (RC-2307) is being dragged from Intake — .is-dragging lifts it onto --elev-overlay, tilts it 2°, and rings it in accent (aria-grabbed="true"). Vetting is the drop target (accent-ringed column + a dashed Drop here placeholder), and its WIP 2/4 shows headroom. Willow is pinned to :hover; hover any card to see the real lift.

columns
Ordered Column[] — { id, title, dot, wip? } with a live count pill of its cards and an optional WIP limit (2/4, turning warn when exceeded). A column is the drop container.
card
Card = { id, name, meta, priority, tags[], assignee, date } on a surface-2 tile with a grip affordance, cursor:grab, and a hover lift to --elev-overlay. Priority + tags are status-tinted chips.
drag states
.is-dragging raises the picked-up card (overlay shadow + 2° tilt + accent ring, aria-grabbed); the target column adds .is-drop-target and renders a dashed drop placeholder at the insertion index.
assignee
An initials avatar (title = full name); the currently-active owner reads on the accent face. Cards keep a stable RC-#### id chip so a moved card stays identifiable.
a11y
Each column is a labelled <section>; cards are focusable (tabindex="0") so a keyboard user can move them without a mouse. Priority is a text chip, never color alone.

Source · workflow family (src/components/ds/workflow) — the board view for the case pipeline; cards compose the Surface primitive (tone surface-2, overlay elevation while dragging) + status chips from globals.css tokens. The drag itself is wired at the app layer; this is the presentational board.