Interactive
Kanban board
Sortable lists that share a group become kanban columns: drag cards between them, or pick one up with Space and move it to the next column with the left and right arrows. Column counts update on drop. Needs monsoon.js.
Needs monsoon.js. The styles work on their own, and the behavior comes from the optional interactive layer: add <script src="https://cdn.jsdelivr.net/npm/monsooncss/dist/monsoon.js" defer></script> or import 'monsooncss/js'. See the interactive layer.
Example
<div class="kanban">
<section class="kanban-column">
<h3 class="kanban-title">To do <span class="kanban-count">3</span></h3>
<ul class="sortable" data-m-sortable data-m-sortable-group="board" aria-label="To do">
<li class="sortable-item flex-col items-start gap-1"><span class="badge badge-sm badge-info">Docs</span>Write the release notes</li>
<li class="sortable-item flex-col items-start gap-1"><span class="badge badge-sm badge-warning">Design</span>Pick the launch colors</li>
<li class="sortable-item">Record a short demo</li>
</ul>
</section>
<section class="kanban-column">
<h3 class="kanban-title">In progress <span class="kanban-count">2</span></h3>
<ul class="sortable" data-m-sortable data-m-sortable-group="board" aria-label="In progress">
<li class="sortable-item flex-col items-start gap-1"><span class="badge badge-sm badge-danger">Bug</span>Fix the focus ring in Safari</li>
<li class="sortable-item">Review the date picker</li>
</ul>
</section>
<section class="kanban-column">
<h3 class="kanban-title">Done <span class="kanban-count">1</span></h3>
<ul class="sortable" data-m-sortable data-m-sortable-group="board" aria-label="Done">
<li class="sortable-item">Ship the token scale</li>
</ul>
</section>
</div>JavaScript API
Attribute
data-m-sortable
Options
| Option | Description |
|---|---|
data-m-sortable-group="board" on every column list | |
aria-label on each list names it in announcements |
Methods
| Method | Description |
|---|---|
Monsoon.sortable(list).move(card, 0, otherList) |
Events
| Event | Description |
|---|---|
monsoon:sort { item, from, to, oldIndex, newIndex } |
Classes
6 classes. Click a name to copy it. Utilities on the same element always win over component defaults, so any of them can be adjusted with plain utility classes.
| Class | Type | What it does |
|---|---|---|
| Base | Base class of the kanban board. On a <div> in the example. Sets grid display, grid tracks, gap, padding and overflow.CSS |
|
| Part | Part of the kanban board. On a <section> in the example. Sets flex display, alignment, gap, height, padding and background.CSS |
|
| Part | Part of the kanban board. On a <h3> in the example. Sets flex display, alignment, gap, padding, text size and font weight.CSS |
|
| Part | Part of the kanban board. On a <span> in the example. Sets margin, width, padding, text size, font weight and text style.CSS |
|
| Part | Part of the kanban board. On an <ul> in the example. Sets grid display, alignment, gap, margin, padding and auto cursor.CSS |
|
| Part | Part of the kanban board. On a <li> in the example. Sets flex display, alignment, gap, padding, text size and text color.CSS |
Usage
The styles ship inside the same stylesheet as the utilities, and the behavior comes from the optional monsoon.js script, which enhances any element with a matching data-m attribute, including markup added later.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/monsooncss">
<script src="https://cdn.jsdelivr.net/npm/monsooncss/dist/monsoon.js" defer></script>
<!-- Kanban board: start from the base class, then add modifiers -->
<div class="kanban">
<section class="kanban-column">
<h3 class="kanban-title">To do <span class="kanban-count">3</span></h3>
<ul class="sortable" data-m-sortable data-m-sortable-group="board" aria-label="To do">
<li class="sortable-item flex-col items-start gap-1"><span class="badge badge-sm badge-info">Docs</span>Write the release notes</li>
<li class="sortable-item flex-col items-start gap-1"><span class="badge badge-sm badge-warning">Design</span>Pick the launch colors</li>
<li class="sortable-item">Record a short demo</li>
</ul>
</section>
<section class="kanban-column">
<h3 class="kanban-title">In progress <span class="kanban-count">2</span></h3>
<ul class="sortable" data-m-sortable data-m-sortable-group="board" aria-label="In progress">
<li class="sortable-item flex-col items-start gap-1"><span class="badge badge-sm badge-danger">Bug</span>Fix the focus ring in Safari</li>
<li class="sortable-item">Review the date picker</li>
<!-- the full example is in the Code tab above -->Theme it with --seed on any ancestor, for example style="--seed: #0d9488", and force a scheme with class="dark" or class="light" on a wrapper.
Accessibility
- Every interactive part shows a visible focus ring with
:focus-visible, and tone colors pair with-foregroundtokens that keep text at 4.5:1 or better in light and dark mode.