Kanban

Kanban is a responsive board for visualizing work across columns. Cards can be reordered or dragged between columns with native browser drag-and-drop.

Backlog

Research

Review user feedback

Group the latest notes into actionable themes.

TodayAM

Content

Write onboarding copy

Prepare the first-run experience for review.

TomorrowJL

In progress

Build alert component

Add variants and keyboard-friendly dismissal.

TodayKS

Review

Docs

Review navbar examples (blocked)

Check mobile overflow and keyboard focus.

FridayAM

Done

Drop completed work here

Drag a card or its handle to another column. On a phone, drag the top-right handle; swipe elsewhere to scroll.

Cards with is-disabled or aria-disabled="true" stay visible but cannot be dragged.

Override an item with data-kanban-color and data-kanban-text-color. Set data-kanban-accent and optionally data-kanban-accent-position (top, right, bottom, or left) for an edge color. The older kanban-card-accent classes and CSS variables remain supported. Use kanban.setZoom(value), kanban.getZoom(), and kanban.resetZoom() for board scaling.

Top accent

A line inside the top edge.

Right accent

A line inside the right edge.

Bottom accent

The default position.

Left accent

A line inside the left edge.

<!-- Top edge -->
<article class="kanban-card kanban-card-accent kanban-card-accent-top"
  style="--kanban-card-accent: #7c4dff">
  <h4 class="kanban-card-title">Top accent</h4>
</article>

<!-- Right edge -->
<article class="kanban-card kanban-card-accent kanban-card-accent-right"
  style="--kanban-card-accent: #00897b">
  <h4 class="kanban-card-title">Right accent</h4>
</article>

<!-- Bottom edge (default) -->
<article class="kanban-card kanban-card-accent kanban-card-accent-bottom"
  style="--kanban-card-accent: #ef6c00">
  <h4 class="kanban-card-title">Bottom accent</h4>
</article>

<!-- Left edge -->
<article class="kanban-card kanban-card-accent kanban-card-accent-left"
  style="--kanban-card-accent: #d81b60">
  <h4 class="kanban-card-title">Left accent</h4>
</article>

<div class="kanban-board" aria-label="Project work board">
  <section class="kanban-column">
    <header class="kanban-column-header">
      <h3 class="kanban-column-title">Backlog</h3>
      <span class="kanban-column-count">1</span>
    </header>
    <div class="kanban-column-body">
      <article class="kanban-card" data-kanban-card="task">
        <h4 class="kanban-card-title">A task</h4>
      </article>
    </div>
  </section>
</div>

Movable cards in this demo have a discreet top-right handle with a 44px touch target and the <i class="material-icons">drag_indicator</i> handle. Drag it to reorder cards or move between columns on a phone. Focus a handle and use up/down arrows to reorder, or left/right arrows to change columns. Disabled cards and boards with draggable: false have no handle.

Import the pointer helper enableCardHandles from kmaterialize; its styles are included in Materialize CSS. It supplements the npm component’s native desktop dragging. See its integration in src/main.ts for the move callback and count updates.

Name	Type	Default	Description
draggable	Boolean	true	Enable native drag-and-drop interactions.
onMove	Function	undefined	Called after a card moves to another column.

Kanban.init(document.querySelector('.kanban-board'), {
  onMove: ({ card, from, to }) => {
    console.log(`${card.dataset.kanbanCard}: ${from} → ${to}`);
  }
});

Introduction
Options

Materialize is a modern responsive CSS framework based on Material Design by Google.