Kanban
Kanban is a native web component board: arrange pura-kanban-card elements inside pura-kanban-column columns and drag them between (and within) columns using native HTML5 drag-and-drop. Columns keep a live count, the board emits a change event after each move, and cards are keyboard-movable (Space to lift, arrow keys to move).
Preview
<pura-kanban>
<pura-kanban-column label="To Do">
<pura-kanban-card><b>Design landing page</b><div style="color:var(--pura-muted);font-size:.8rem;margin-top:4px">Hero + pricing</div></pura-kanban-card>
<pura-kanban-card>Write release notes</pura-kanban-card>
<pura-kanban-card>Fix login bug</pura-kanban-card>
</pura-kanban-column>
<pura-kanban-column label="In Progress">
<pura-kanban-card><b>API rate limiting</b></pura-kanban-card>
<pura-kanban-card>Onboarding flow</pura-kanban-card>
</pura-kanban-column>
<pura-kanban-column label="Done">
<pura-kanban-card>Set up CI</pura-kanban-card>
</pura-kanban-column>
</pura-kanban>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
label | string | — | Column heading (on pura-kanban-column). |
Installation
pura is copy-paste and dependency-free. Load the whole library, or just this component.
<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/kanban.js"></script>import "./pura/lib/kanban.js";