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-motion for the drop-settle animation.

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-motion for 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-motion for the drop-settle animation.

Compatible

• @community/pattern-data-table-dense
• @community/pattern-optimistic-update