Kanban Board
A horizontal lane-based board where each column represents a workflow status (e.g., Backlog / In Progress / Done) and each card is a draggable work item.…
$ prime install @community/pattern-kanban-board Projection
Always in _index.xml · the agent never has to ask for this.
KanbanBoard [pattern] v1.0.0
A horizontal lane-based board where each column represents a workflow status (e.g., Backlog / In Progress / Done) and each card is a draggable work item. Visualizes flow and supports drag-to-progress as the primary interaction.
Loaded when retrieval picks the atom as adjacent / supporting.
KanbanBoard [pattern] v1.0.0
A horizontal lane-based board where each column represents a workflow status (e.g., Backlog / In Progress / Done) and each card is a draggable work item. Visualizes flow and supports drag-to-progress as the primary interaction.
Facts
Label
Kanban Board
Problem
Lists hide work-in-progress and bottlenecks. Teams need a spatial view that shows the count and shape of work in each phase and lets members move items between phases by direct manipulation.
Solution
Render columns as side-by-side scrollable lanes. Each lane has a header (status + count + add button) and a vertically scrollable stack of cards. Cards are draggable across lanes; drops fire status updates.
Structure
<div class="board" role="region" aria-label="Sprint board">
<div class="lane" data-status="todo">
<header>
<h2>To do<span class="count" aria-label="8 items">8</span></h2>
<button aria-label="Add to To do">+</button>
</header>
<ul role="list" aria-label="To do cards">
<li>
<article
class="card"
draggable="true"
tabindex="0"
aria-label="PRM-1024 Fix login redirect, priority P1, in To do"
>
<h3><a href="/i/1024">PRM-1024 Fix login redirect</a></h3>
<footer>
<span class="badge">P1</span>
<img alt="Kevin H" />
</footer>
</article>
</li>
</ul>
</div>
<div class="lane" data-status="doing"><header><h2>In Progress<span>3</span></h2></header><ul role="list"></ul></div>
<div class="lane" data-status="done"><header><h2>Done<span>14</span></h2></header><ul role="list"></ul></div>
</div>
Uses
- @community/method-heuristic-review
Behavior
- Cards use
draggable='true'; while dragging, lanes show a drop-zone outline. - Drop on a lane updates the card's status and animates it into position.
- Keyboard alternative: focus a card, press Space to lift, Arrow Left/Right to change lane, Arrow Up/Down to reorder, Space to drop.
- Each lane scrolls vertically when its cards exceed viewport height; whole board scrolls horizontally.
- Show WIP-limit warning when a lane exceeds its configured threshold (e.g., red count badge).
- Optimistic update: card moves immediately on drop; revert with toast on server error.
A11y
- Drag-and-drop with mouse-only excludes keyboard users — provide a Space-to-lift keyboard mode (per W3C drag-and-drop guidance).
- Each card needs a descriptive accessible name including title, priority, and current lane.
- Lanes should be
role='region'(or use a list pattern) with an aria-label naming the status. - Live-announce lane changes during keyboard drag: 'Moved to In Progress, position 2 of 3'.
- Honor
prefers-reduced-motionfor the drop-settle animation.
Loaded when retrieval picks the atom as a focal / direct hit.
KanbanBoard [pattern] v1.0.0
A horizontal lane-based board where each column represents a workflow status (e.g., Backlog / In Progress / Done) and each card is a draggable work item. Visualizes flow and supports drag-to-progress as the primary interaction.
Facts
Label
Kanban Board
Problem
Lists hide work-in-progress and bottlenecks. Teams need a spatial view that shows the count and shape of work in each phase and lets members move items between phases by direct manipulation.
Solution
Render columns as side-by-side scrollable lanes. Each lane has a header (status + count + add button) and a vertically scrollable stack of cards. Cards are draggable across lanes; drops fire status updates.
Structure
<div class="board" role="region" aria-label="Sprint board">
<div class="lane" data-status="todo">
<header>
<h2>To do<span class="count" aria-label="8 items">8</span></h2>
<button aria-label="Add to To do">+</button>
</header>
<ul role="list" aria-label="To do cards">
<li>
<article
class="card"
draggable="true"
tabindex="0"
aria-label="PRM-1024 Fix login redirect, priority P1, in To do"
>
<h3><a href="/i/1024">PRM-1024 Fix login redirect</a></h3>
<footer>
<span class="badge">P1</span>
<img alt="Kevin H" />
</footer>
</article>
</li>
</ul>
</div>
<div class="lane" data-status="doing"><header><h2>In Progress<span>3</span></h2></header><ul role="list"></ul></div>
<div class="lane" data-status="done"><header><h2>Done<span>14</span></h2></header><ul role="list"></ul></div>
</div>
Uses
- @community/method-heuristic-review
Behavior
- Cards use
draggable='true'; while dragging, lanes show a drop-zone outline. - Drop on a lane updates the card's status and animates it into position.
- Keyboard alternative: focus a card, press Space to lift, Arrow Left/Right to change lane, Arrow Up/Down to reorder, Space to drop.
- Each lane scrolls vertically when its cards exceed viewport height; whole board scrolls horizontally.
- Show WIP-limit warning when a lane exceeds its configured threshold (e.g., red count badge).
- Optimistic update: card moves immediately on drop; revert with toast on server error.
A11y
- Drag-and-drop with mouse-only excludes keyboard users — provide a Space-to-lift keyboard mode (per W3C drag-and-drop guidance).
- Each card needs a descriptive accessible name including title, priority, and current lane.
- Lanes should be
role='region'(or use a list pattern) with an aria-label naming the status. - Live-announce lane changes during keyboard drag: 'Moved to In Progress, position 2 of 3'.
- Honor
prefers-reduced-motionfor the drop-settle animation.
Examples
- @community/example-linear-cycle-board
- @community/example-trello-board
- @community/example-jira-board
Label
Kanban Board
Problem
Lists hide work-in-progress and bottlenecks. Teams need a spatial view that shows the count and shape of work in each phase and lets members move items between phases by direct manipulation.
Solution
Render columns as side-by-side scrollable lanes. Each lane has a header (status + count + add button) and a vertically scrollable stack of cards. Cards are draggable across lanes; drops fire status updates.
Structure
<div class="board" role="region" aria-label="Sprint board">
<div class="lane" data-status="todo">
<header>
<h2>To do<span class="count" aria-label="8 items">8</span></h2>
<button aria-label="Add to To do">+</button>
</header>
<ul role="list" aria-label="To do cards">
<li>
<article
class="card"
draggable="true"
tabindex="0"
aria-label="PRM-1024 Fix login redirect, priority P1, in To do"
>
<h3><a href="/i/1024">PRM-1024 Fix login redirect</a></h3>
<footer>
<span class="badge">P1</span>
<img alt="Kevin H" />
</footer>
</article>
</li>
</ul>
</div>
<div class="lane" data-status="doing"><header><h2>In Progress<span>3</span></h2></header><ul role="list"></ul></div>
<div class="lane" data-status="done"><header><h2>Done<span>14</span></h2></header><ul role="list"></ul></div>
</div>
Uses
- @community/method-heuristic-review
Behavior
- Cards use
draggable='true'; while dragging, lanes show a drop-zone outline. - Drop on a lane updates the card's status and animates it into position.
- Keyboard alternative: focus a card, press Space to lift, Arrow Left/Right to change lane, Arrow Up/Down to reorder, Space to drop.
- Each lane scrolls vertically when its cards exceed viewport height; whole board scrolls horizontally.
- Show WIP-limit warning when a lane exceeds its configured threshold (e.g., red count badge).
- Optimistic update: card moves immediately on drop; revert with toast on server error.
A11y
- Drag-and-drop with mouse-only excludes keyboard users — provide a Space-to-lift keyboard mode (per W3C drag-and-drop guidance).
- Each card needs a descriptive accessible name including title, priority, and current lane.
- Lanes should be
role='region'(or use a list pattern) with an aria-label naming the status. - Live-announce lane changes during keyboard drag: 'Moved to In Progress, position 2 of 3'.
- Honor
prefers-reduced-motionfor the drop-settle animation.
Compatible
- @community/pattern-data-table-dense
- @community/pattern-optimistic-update
Source
prime-system/examples/frontend-design/primes/compiled/@community/pattern-kanban-board/atom.yaml