kanban board task columns workflow kanban board columns workflow drag stages sprint organize tasks in columns show kanban workflow board
Kanban Board Widget
Fetch pattern JSON:
curl https://webspire.de/patterns/task-widget/kanban.json kanban.html
<div
class="ws-task-widget rounded-2xl border border-[var(--ws-task-widget-border)] bg-[var(--ws-task-widget-bg)] p-4"
>
<div class="mb-4 flex items-center justify-between px-1">
<h2 class="text-base font-semibold text-[var(--ws-task-widget-text)]">Board</h2>
<span class="text-xs text-[var(--ws-task-widget-text-muted)]">7 tasks</span>
</div>
<div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
<!-- To Do Column -->
<div class="rounded-xl bg-[var(--ws-task-widget-muted-bg)] p-3">
<div class="mb-3 flex items-center justify-between">
<h3 class="text-xs font-semibold uppercase tracking-wider text-[var(--ws-task-widget-text-soft)]">To Do</h3>
<span class="inline-flex size-5 items-center justify-center rounded-full bg-[var(--ws-task-widget-bg)] text-[0.625rem] font-medium text-[var(--ws-task-widget-text-muted)]">3</span>
</div>
<div class="flex flex-col gap-2">
<article class="rounded-lg border border-[var(--ws-task-widget-border)] bg-[var(--ws-task-widget-bg)] p-3">
<h4 class="text-sm font-medium text-[var(--ws-task-widget-text)]">Design system tokens</h4>
<div class="mt-2 flex items-center justify-between">
<span class="rounded-full bg-[var(--ws-task-widget-accent)]/15 px-2 py-0.5 text-[0.625rem] font-medium text-[var(--ws-task-widget-accent)]">Design</span>
<span class="flex size-6 items-center justify-center rounded-full bg-purple-100 text-[0.625rem] font-semibold text-purple-700" aria-label="Assigned to A">A</span>
</div>
</article>
<article class="rounded-lg border border-[var(--ws-task-widget-border)] bg-[var(--ws-task-widget-bg)] p-3">
<h4 class="text-sm font-medium text-[var(--ws-task-widget-text)]">API error handling</h4>
<div class="mt-2 flex items-center justify-between">
<span class="rounded-full bg-red-500/15 px-2 py-0.5 text-[0.625rem] font-medium text-red-600">Bug</span>
<span class="flex size-6 items-center justify-center rounded-full bg-blue-100 text-[0.625rem] font-semibold text-blue-700" aria-label="Assigned to M">M</span>
</div>
</article>
<article class="rounded-lg border border-[var(--ws-task-widget-border)] bg-[var(--ws-task-widget-bg)] p-3">
<h4 class="text-sm font-medium text-[var(--ws-task-widget-text)]">Onboarding flow</h4>
<div class="mt-2 flex items-center justify-between">
<span class="rounded-full bg-green-500/15 px-2 py-0.5 text-[0.625rem] font-medium text-green-600">Feature</span>
<span class="flex size-6 items-center justify-center rounded-full bg-amber-100 text-[0.625rem] font-semibold text-amber-700" aria-label="Assigned to S">S</span>
</div>
</article>
</div>
</div>
<!-- In Progress Column -->
<div class="rounded-xl bg-[var(--ws-task-widget-muted-bg)] p-3">
<div class="mb-3 flex items-center justify-between">
<h3 class="text-xs font-semibold uppercase tracking-wider text-[var(--ws-task-widget-text-soft)]">In Progress</h3>
<span class="inline-flex size-5 items-center justify-center rounded-full bg-[var(--ws-task-widget-bg)] text-[0.625rem] font-medium text-[var(--ws-task-widget-text-muted)]">2</span>
</div>
<div class="flex flex-col gap-2">
<article class="rounded-lg border border-[var(--ws-task-widget-border)] bg-[var(--ws-task-widget-bg)] p-3">
<h4 class="text-sm font-medium text-[var(--ws-task-widget-text)]">Dashboard layout</h4>
<div class="mt-2 flex items-center justify-between">
<span class="rounded-full bg-[var(--ws-task-widget-accent)]/15 px-2 py-0.5 text-[0.625rem] font-medium text-[var(--ws-task-widget-accent)]">Design</span>
<span class="flex size-6 items-center justify-center rounded-full bg-emerald-100 text-[0.625rem] font-semibold text-emerald-700" aria-label="Assigned to J">J</span>
</div>
</article>
<article class="rounded-lg border border-[var(--ws-task-widget-border)] bg-[var(--ws-task-widget-bg)] p-3">
<h4 class="text-sm font-medium text-[var(--ws-task-widget-text)]">Auth integration</h4>
<div class="mt-2 flex items-center justify-between">
<span class="rounded-full bg-green-500/15 px-2 py-0.5 text-[0.625rem] font-medium text-green-600">Feature</span>
<span class="flex size-6 items-center justify-center rounded-full bg-purple-100 text-[0.625rem] font-semibold text-purple-700" aria-label="Assigned to A">A</span>
</div>
</article>
</div>
</div>
<!-- Done Column -->
<div class="rounded-xl bg-[var(--ws-task-widget-muted-bg)] p-3">
<div class="mb-3 flex items-center justify-between">
<h3 class="text-xs font-semibold uppercase tracking-wider text-[var(--ws-task-widget-text-soft)]">Done</h3>
<span class="inline-flex size-5 items-center justify-center rounded-full bg-[var(--ws-task-widget-success)]/15 text-[0.625rem] font-medium text-[var(--ws-task-widget-success)]">2</span>
</div>
<div class="flex flex-col gap-2">
<article class="rounded-lg border border-[var(--ws-task-widget-border)] bg-[var(--ws-task-widget-bg)] p-3">
<h4 class="text-sm font-medium text-[var(--ws-task-widget-text-muted)] line-through">Project setup</h4>
<div class="mt-2 flex items-center justify-between">
<span class="rounded-full bg-green-500/15 px-2 py-0.5 text-[0.625rem] font-medium text-green-600">Feature</span>
<span class="flex size-6 items-center justify-center rounded-full bg-blue-100 text-[0.625rem] font-semibold text-blue-700" aria-label="Assigned to M">M</span>
</div>
</article>
<article class="rounded-lg border border-[var(--ws-task-widget-border)] bg-[var(--ws-task-widget-bg)] p-3">
<h4 class="text-sm font-medium text-[var(--ws-task-widget-text-muted)] line-through">CI/CD pipeline</h4>
<div class="mt-2 flex items-center justify-between">
<span class="rounded-full bg-amber-500/15 px-2 py-0.5 text-[0.625rem] font-medium text-amber-600">DevOps</span>
<span class="flex size-6 items-center justify-center rounded-full bg-emerald-100 text-[0.625rem] font-semibold text-emerald-700" aria-label="Assigned to J">J</span>
</div>
</article>
</div>
</div>
</div>
</div>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
kanbanboardtaskcolumnsworkflow
A kanban board layout with multiple columns representing workflow stages such as To Do, In Progress, and Done. Each column holds task cards with titles, assignees, and priority indicators. Extends the base task widget into a full board view for project management and sprint planning.