Workflow stage.
Redesign onboarding checklist
Fix pagination on reports table
Write release notes for v2.4
<section class="kanban-col kanban-col--comfortable" aria-labelledby="kanban-col-heading" style="--accent:#BFD9F2;">
<header class="kanban-col__head">
<span class="kanban-col__bar" aria-hidden="true"></span>
<h3 id="kanban-col-heading" class="kanban-col__title">In progress</h3>
<span class="kanban-col__count">3 / 5</span>
</header>
<ul class="kanban-col__list" data-count="3">
<li class="kanban-col__card" draggable="true">
<p class="kanban-col__card-title">Redesign onboarding checklist</p>
<div class="kanban-col__card-meta">
<span class="kanban-col__avatar">RO</span>
<label class="kanban-col__move-label">
<span class="sr-only">Move "Redesign onboarding checklist" to</span>
<select class="kanban-col__move"><option>To do</option><option selected>In progress</option><option>Done</option></select>
</label>
</div>
</li>
<li class="kanban-col__card" draggable="true">
<p class="kanban-col__card-title">Fix pagination on reports table</p>
<div class="kanban-col__card-meta">
<span class="kanban-col__avatar">MI</span>
<label class="kanban-col__move-label">
<span class="sr-only">Move "Fix pagination on reports table" to</span>
<select class="kanban-col__move"><option>To do</option><option selected>In progress</option><option>Done</option></select>
</label>
</div>
</li>
<li class="kanban-col__card" draggable="true">
<p class="kanban-col__card-title">Write release notes for v2.4</p>
<div class="kanban-col__card-meta">
<span class="kanban-col__avatar">SN</span>
<label class="kanban-col__move-label">
<span class="sr-only">Move "Write release notes for v2.4" to</span>
<select class="kanban-col__move"><option>To do</option><option selected>In progress</option><option>Done</option></select>
</label>
</div>
</li>
</ul>
</section>
<style>
.kanban-col { max-width: 300px; background: #FAF7F2; border: 1px solid #24143022; border-radius: 12px; box-sizing: border-box; font: 14px/1.4 system-ui, sans-serif; color: #241430; overflow: hidden; }
.kanban-col__head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid #24143018; }
.kanban-col__bar { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.kanban-col__title { margin: 0; font-size: 14px; font-weight: 700; flex: 1; }
.kanban-col__count { font: 600 12px/1 system-ui, sans-serif; color: #241430; background: #24143012; padding: 3px 8px; border-radius: 999px; }
.kanban-col__list { list-style: none; margin: 0; padding: 10px; display: flex; flex-direction: column; gap: 10px; max-height: 320px; overflow-y: auto; }
.kanban-col__list[data-count="1"] li:nth-child(n+2) { display: none; }
.kanban-col__list[data-count="2"] li:nth-child(n+3) { display: none; }
.kanban-col__card { background: #FAF7F2; border: 1px solid #24143022; border-radius: 9px; padding: 10px 12px; box-shadow: 0 1px 2px rgba(36,20,48,.06); }
.kanban-col--compact .kanban-col__list { gap: 6px; padding: 8px; }
.kanban-col--compact .kanban-col__card { padding: 7px 10px; }
.kanban-col__card-title { margin: 0 0 8px; font-size: 13px; font-weight: 600; }
.kanban-col--compact .kanban-col__card-title { margin-bottom: 4px; font-size: 12.5px; }
.kanban-col__card-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kanban-col__avatar { width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #241430; font: 700 10px/22px system-ui, sans-serif; text-align: center; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.kanban-col__move { font: 500 11px system-ui, sans-serif; padding: 3px 5px; border-radius: 6px; border: 1px solid #24143033; background: #FAF7F2; color: #241430; }
.kanban-col__move:focus-visible { outline: 2px solid #241430; outline-offset: 1px; }
</style><section aria-labelledby="kanban-col-heading-tw" class="kanban-col-tw kanban-col-tw--comfortable max-w-[300px] bg-[#FAF7F2] border border-[#24143022] rounded-xl box-border font-sans text-sm text-[#241430] overflow-hidden" style="--accent:#BFD9F2;">
<header class="flex items-center gap-2 px-3.5 py-3 border-b border-[#24143018]">
<span class="w-2 h-2 rounded-full flex-shrink-0" style="background:#BFD9F2" aria-hidden="true"></span>
<h3 id="kanban-col-heading-tw" class="m-0 text-sm font-bold flex-1">In progress</h3>
<span class="text-xs font-semibold bg-[#24143012] px-2 py-0.5 rounded-full">3 / 5</span>
</header>
<ul class="kanban-col-tw__list list-none m-0 p-2.5 flex flex-col gap-2.5 max-h-[320px] overflow-y-auto" data-count="3">
<li class="kanban-col-tw__card bg-[#FAF7F2] border border-[#24143022] rounded-lg shadow-sm" draggable="true">
<p class="kanban-col-tw__card-title m-0 mb-2 text-[13px] font-semibold">Redesign onboarding checklist</p>
<div class="flex items-center justify-between gap-2">
<span class="w-[22px] h-[22px] rounded-full text-[10px] font-bold text-center leading-[22px]" style="background:#BFD9F2">RO</span>
<label>
<span class="sr-only">Move "Redesign onboarding checklist" to</span>
<select class="text-[11px] font-medium px-1.5 py-0.5 rounded-md border border-[#24143033] bg-[#FAF7F2]"><option>To do</option><option selected>In progress</option><option>Done</option></select>
</label>
</div>
</li>
<li class="kanban-col-tw__card bg-[#FAF7F2] border border-[#24143022] rounded-lg shadow-sm" draggable="true">
<p class="kanban-col-tw__card-title m-0 mb-2 text-[13px] font-semibold">Fix pagination on reports table</p>
<div class="flex items-center justify-between gap-2">
<span class="w-[22px] h-[22px] rounded-full text-[10px] font-bold text-center leading-[22px]" style="background:#BFD9F2">MI</span>
<label>
<span class="sr-only">Move "Fix pagination on reports table" to</span>
<select class="text-[11px] font-medium px-1.5 py-0.5 rounded-md border border-[#24143033] bg-[#FAF7F2]"><option>To do</option><option selected>In progress</option><option>Done</option></select>
</label>
</div>
</li>
<li class="kanban-col-tw__card bg-[#FAF7F2] border border-[#24143022] rounded-lg shadow-sm" draggable="true">
<p class="kanban-col-tw__card-title m-0 mb-2 text-[13px] font-semibold">Write release notes for v2.4</p>
<div class="flex items-center justify-between gap-2">
<span class="w-[22px] h-[22px] rounded-full text-[10px] font-bold text-center leading-[22px]" style="background:#BFD9F2">SN</span>
<label>
<span class="sr-only">Move "Write release notes for v2.4" to</span>
<select class="text-[11px] font-medium px-1.5 py-0.5 rounded-md border border-[#24143033] bg-[#FAF7F2]"><option>To do</option><option selected>In progress</option><option>Done</option></select>
</label>
</div>
</li>
</ul>
</section>
<style>
.kanban-col-tw__list[data-count="1"] li:nth-child(n+2) { display: none; }
.kanban-col-tw__list[data-count="2"] li:nth-child(n+3) { display: none; }
.kanban-col-tw--compact .kanban-col-tw__list { gap: 6px; padding: 8px; }
.kanban-col-tw--compact .kanban-col-tw__card { padding: 7px 10px; }
.kanban-col-tw--comfortable .kanban-col-tw__card { padding: 10px 12px; }
.kanban-col-tw--compact .kanban-col-tw__card-title { margin-bottom: 4px; font-size: 12.5px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
</style>export function KanbanColumn({
stage = "In progress",
cardsShown = 3,
wipLimit = 5,
density = "comfortable",
accent = "#BFD9F2",
}) {
const cards = [
{ title: "Redesign onboarding checklist", initials: "RO" },
{ title: "Fix pagination on reports table", initials: "MI" },
{ title: "Write release notes for v2.4", initials: "SN" },
].slice(0, cardsShown);
const compact = density === "compact";
return (
<section aria-labelledby="kanban-col-heading-react" style={{ maxWidth: 300, background: "#FAF7F2", border: "1px solid #24143022", borderRadius: 12, boxSizing: "border-box", font: "14px/1.4 system-ui, sans-serif", color: "#241430", overflow: "hidden" }}>
<header style={{ display: "flex", alignItems: "center", gap: 8, padding: "12px 14px", borderBottom: "1px solid #24143018" }}>
<span aria-hidden="true" style={{ width: 8, height: 8, borderRadius: "50%", background: accent, flexShrink: 0 }} />
<h3 id="kanban-col-heading-react" style={{ margin: 0, fontSize: 14, fontWeight: 700, flex: 1 }}>{stage}</h3>
<span style={{ font: "600 12px/1 system-ui, sans-serif", background: "#24143012", padding: "3px 8px", borderRadius: 999 }}>{cardsShown} / {wipLimit}</span>
</header>
<ul style={{ listStyle: "none", margin: 0, padding: compact ? 8 : 10, display: "flex", flexDirection: "column", gap: compact ? 6 : 10, maxHeight: 320, overflowY: "auto" }}>
{cards.map((card) => (
<li key={card.title} draggable style={{ background: "#FAF7F2", border: "1px solid #24143022", borderRadius: 9, padding: compact ? "7px 10px" : "10px 12px", boxShadow: "0 1px 2px rgba(36,20,48,.06)" }}>
<p style={{ margin: compact ? "0 0 4px" : "0 0 8px", fontSize: compact ? 12.5 : 13, fontWeight: 600 }}>{card.title}</p>
<div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 8 }}>
<span style={{ width: 22, height: 22, borderRadius: "50%", background: accent, color: "#241430", font: "700 10px/22px system-ui, sans-serif", textAlign: "center" }}>{card.initials}</span>
<label>
<span style={{ position: "absolute", width: 1, height: 1, overflow: "hidden", clip: "rect(0,0,0,0)" }}>{"Move " + card.title + " to"}</span>
<select style={{ font: "500 11px system-ui, sans-serif", padding: "3px 5px", borderRadius: 6, border: "1px solid #24143033", background: "#FAF7F2", color: "#241430" }} defaultValue={stage}>
<option>To do</option>
<option>In progress</option>
<option>Done</option>
</select>
</label>
</div>
</li>
))}
</ul>
</section>
);
}