Board

Status columns of cards for work that moves between states. Each column shows its glyph, name and count, and keeps its place when empty — an empty Re-do column is information. A card is a button when it opens something, so it works from the keyboard.

import { Board, BoardColumn, BoardCard } from "@puckoops/camelot";

Backlog

2

In Progress

1

In Review

1

Re-do

0

Done

1

Board takes no props of its own.

Also takes HTMLAttributes<HTMLDivElement>.

When to use

Use Board for work that moves between states. Columns keep their place when empty — an empty Re-do column is information.

  • Use Table instead when the reader needs to compare many fields across items.

Examples

Drag And Drop

Drag a card: the column under it goes dashed, the card fades while it moves, and the counts update.

Backlog

2

Rebrand discovery notes

Purslane Studio

12 OctP3

Packaging die-line audit

Brightwater Foods

15 OctP2

In Progress

1

Brand system rollout

Nordvik Atelier

02 OctP1

In Review

1

Signage proofs

Nordvik Atelier

03 OctP2

Re-do

0

Done

1

Annual report cover

Halden & Moss

28 SepP2

Drop Target

Mid-drag: the card at half opacity, the target column dashed.

In Progress

1

Brand system rollout

Nordvik Atelier

02 OctP1

In Review

0

Done

0

Cards

A card with a title only, with its client, and with a due date and priority.

All Variants

Full and empty columns, a card mid-drag and a drop target.

Backlog

2

In Progress

1

Brand system rollout

Nordvik Atelier

02 OctP1

Re-do

0

Done

0