Edit Swimlane

Name

Also known as (comma separated)

Brief definition Horizontal grouping on a Kanban board.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "groupBy", "type": "select", "label": "Group by", "default": "Assignee", "options": [ "Assignee", "Team", "Priority" ] }, { "id": "laneName", "type": "text", "label": "Lane label", "default": "Priya Nair" }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#D9C8F0", "presets": [ "#D9C8F0", "#A8E6C1", "#F5C2E0", "#BFD9F2", "#E8A020", "#241430" ] }, { "id": "showCount", "type": "toggle", "label": "Show column counts", "default": true }, { "id": "compact", "type": "toggle", "label": "Compact layout", "default": false } ]

Templates (JSON object keyed by format) { "html": "<section class=\"swimlane\" aria-labelledby=\"swimlane-heading\" style=\"--accent: {{accent}};\">\n <h3 id=\"swimlane-heading\" class=\"swimlane__heading\">{{groupBy}}: {{laneName}}</h3>\n <div class=\"swimlane__scroll\">\n <div class=\"swimlane__strip{{#if compact}} swimlane__strip--compact{{/if}}\">\n <section class=\"swimlane__column\" aria-labelledby=\"swimlane-col-todo\">\n <h4 id=\"swimlane-col-todo\" class=\"swimlane__column-title\">To do {{#if showCount}}<span class=\"swimlane__count\">2 items</span>{{/if}}</h4>\n <ul class=\"swimlane__cards\">\n <li class=\"swimlane__card\" draggable=\"true\">\n <span class=\"swimlane__card-title\">Draft onboarding flow</span>\n <span class=\"swimlane__card-avatar\">PN</span>\n <button type=\"button\" class=\"swimlane__move\">Move to In progress</button>\n </li>\n <li class=\"swimlane__card\" draggable=\"true\">\n <span class=\"swimlane__card-title\">Audit empty states</span>\n <span class=\"swimlane__card-avatar\">PN</span>\n <button type=\"button\" class=\"swimlane__move\">Move to In progress</button>\n </li>\n </ul>\n </section>\n <section class=\"swimlane__column\" aria-labelledby=\"swimlane-col-progress\">\n <h4 id=\"swimlane-col-progress\" class=\"swimlane__column-title\">In progress {{#if showCount}}<span class=\"swimlane__count\">1 item</span>{{/if}}</h4>\n <ul class=\"swimlane__cards\">\n <li class=\"swimlane__card\" draggable=\"true\">\n <span class=\"swimlane__card-title\">Ship notification prefs</span>\n <span class=\"swimlane__card-avatar\">PN</span>\n <button type=\"button\" class=\"swimlane__move\">Move to Done</button>\n </li>\n </ul>\n </section>\n </div>\n </div>\n</section>\n<style>\n.swimlane { font-family: system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 16px; border-radius: 10px; max-width: 660px; box-sizing: border-box; }\n.swimlane__heading { margin: 0 0 12px; font-size: 15px; font-weight: 700; }\n.swimlane__scroll { overflow-x: auto; padding-bottom: 4px; }\n.swimlane__strip { display: flex; gap: 16px; min-width: max-content; }\n.swimlane__strip--compact { gap: 8px; }\n.swimlane__column { width: 220px; flex: 0 0 auto; background: #24143008; border-radius: 8px; padding: 10px; box-sizing: border-box; }\n.swimlane__strip--compact .swimlane__column { width: 180px; padding: 6px; }\n.swimlane__column-title { margin: 0 0 8px; font-size: 13px; font-weight: 600; display: flex; justify-content: space-between; align-items: center; }\n.swimlane__count { font-weight: 500; font-size: 11px; color: #241430aa; }\n.swimlane__cards { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }\n.swimlane__card { background: #FAF7F2; border: 1px solid #24143020; border-radius: 6px; padding: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12.5px; }\n.swimlane__card-title { flex: 1 1 auto; }\n.swimlane__card-avatar { width: 22px; height: 22px; border-radius: 50%; background: var(--accent); display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: #241430; }\n.swimlane__move { flex: 0 0 100%; font-size: 11px; border: 1px solid #24143040; background: transparent; border-radius: 6px; padding: 4px 6px; cursor: pointer; color: #241430; }\n.swimlane__move:hover, .swimlane__move:focus-visible { background: #24143012; outline: 2px solid var(--accent); outline-offset: 1px; }\n</style>", "tailwind": "<section class=\"swimlane-tw font-sans text-[#241430] bg-[#FAF7F2] p-4 rounded-[10px] max-w-[660px] box-border\" aria-labelledby=\"swimlane-tw-heading\" style=\"--accent: {{accent}};\">\n <h3 id=\"swimlane-tw-heading\" class=\"m-0 mb-3 text-[15px] font-bold\">{{groupBy}}: {{laneName}}</h3>\n <div class=\"overflow-x-auto pb-1\">\n <div class=\"swimlane-tw__strip{{#if compact}} swimlane-tw__strip--compact{{/if}} flex gap-4\" style=\"min-width: max-content;\">\n <section class=\"swimlane-tw__column w-[220px] flex-none bg-[#24143008] rounded-lg p-2.5 box-border\" aria-labelledby=\"swimlane-tw-col-todo\">\n <h4 id=\"swimlane-tw-col-todo\" class=\"m-0 mb-2 text-[13px] font-semibold flex justify-between items-center\">To do {{#if showCount}}<span class=\"font-medium text-[11px] text-[#241430aa]\">2 items</span>{{/if}}</h4>\n <ul class=\"list-none m-0 p-0 flex flex-col gap-2\">\n <li class=\"flex flex-wrap items-center gap-1.5 bg-[#FAF7F2] border border-[#24143020] rounded-md p-2 text-[12.5px]\" draggable=\"true\">\n <span class=\"flex-1\">Draft onboarding flow</span>\n <span class=\"w-[22px] h-[22px] rounded-full inline-flex items-center justify-center text-[10px] font-bold\" style=\"background: var(--accent);\">PN</span>\n <button type=\"button\" class=\"swimlane-tw__move flex-none w-full text-[11px] border border-[#24143040] bg-transparent rounded-md px-1.5 py-1 cursor-pointer text-[#241430]\">Move to In progress</button>\n </li>\n <li class=\"flex flex-wrap items-center gap-1.5 bg-[#FAF7F2] border border-[#24143020] rounded-md p-2 text-[12.5px]\" draggable=\"true\">\n <span class=\"flex-1\">Audit empty states</span>\n <span class=\"w-[22px] h-[22px] rounded-full inline-flex items-center justify-center text-[10px] font-bold\" style=\"background: var(--accent);\">PN</span>\n <button type=\"button\" class=\"swimlane-tw__move flex-none w-full text-[11px] border border-[#24143040] bg-transparent rounded-md px-1.5 py-1 cursor-pointer text-[#241430]\">Move to In progress</button>\n </li>\n </ul>\n </section>\n <section class=\"swimlane-tw__column w-[220px] flex-none bg-[#24143008] rounded-lg p-2.5 box-border\" aria-labelledby=\"swimlane-tw-col-progress\">\n <h4 id=\"swimlane-tw-col-progress\" class=\"m-0 mb-2 text-[13px] font-semibold flex justify-between items-center\">In progress {{#if showCount}}<span class=\"font-medium text-[11px] text-[#241430aa]\">1 item</span>{{/if}}</h4>\n <ul class=\"list-none m-0 p-0 flex flex-col gap-2\">\n <li class=\"flex flex-wrap items-center gap-1.5 bg-[#FAF7F2] border border-[#24143020] rounded-md p-2 text-[12.5px]\" draggable=\"true\">\n <span class=\"flex-1\">Ship notification prefs</span>\n <span class=\"w-[22px] h-[22px] rounded-full inline-flex items-center justify-center text-[10px] font-bold\" style=\"background: var(--accent);\">PN</span>\n <button type=\"button\" class=\"swimlane-tw__move flex-none w-full text-[11px] border border-[#24143040] bg-transparent rounded-md px-1.5 py-1 cursor-pointer text-[#241430]\">Move to Done</button>\n </li>\n </ul>\n </section>\n </div>\n </div>\n</section>\n<style>\n.swimlane-tw__strip--compact { gap: 8px; }\n.swimlane-tw__strip--compact .swimlane-tw__column { width: 180px; padding: 6px; }\n.swimlane-tw__move:hover, .swimlane-tw__move:focus-visible { background: #24143012; outline: 2px solid var(--accent); outline-offset: 1px; }\n</style>", "react": "export function Swimlane({\n groupBy = \"{{groupBy}}\",\n laneName = \"{{laneName}}\",\n accent = \"{{accent}}\",\n showCount = {{showCount}},\n compact = {{compact}},\n}) {\n const columnStyle = { width: compact ? 180 : 220, flex: \"0 0 auto\", background: \"#24143008\", borderRadius: 8, padding: compact ? 6 : 10, boxSizing: \"border-box\" };\n const cardStyle = { background: \"#FAF7F2\", border: \"1px solid #24143020\", borderRadius: 6, padding: 8, display: \"flex\", flexWrap: \"wrap\", alignItems: \"center\", gap: 6, fontSize: 12.5 };\n const avatarStyle = { width: 22, height: 22, borderRadius: \"50%\", background: accent, display: \"inline-flex\", alignItems: \"center\", justifyContent: \"center\", fontSize: 10, fontWeight: 700, color: \"#241430\" };\n const moveBtnStyle = { flex: \"0 0 100%\", fontSize: 11, border: \"1px solid #24143040\", background: \"transparent\", borderRadius: 6, padding: \"4px 6px\", cursor: \"pointer\", color: \"#241430\" };\n return (\n <section aria-labelledby=\"swimlane-heading\" style={{ fontFamily: \"system-ui, sans-serif\", color: \"#241430\",\n background: \"#FAF7F2\", padding: 16, borderRadius: 10, maxWidth: 660, boxSizing: \"border-box\" }}>\n <h3 id=\"swimlane-heading\" style={{ margin: \"0 0 12px\", fontSize: 15, fontWeight: 700 }}>{groupBy}: {laneName}</h3>\n <div style={{ overflowX: \"auto\", paddingBottom: 4 }}>\n <div style={{ display: \"flex\", gap: compact ? 8 : 16, minWidth: \"max-content\" }}>\n <section aria-labelledby=\"swimlane-col-todo\" style={columnStyle}>\n <h4 id=\"swimlane-col-todo\" style={{ margin: \"0 0 8px\", fontSize: 13, fontWeight: 600, display: \"flex\", justifyContent: \"space-between\", alignItems: \"center\" }}>\n To do {showCount && <span style={{ fontWeight: 500, fontSize: 11, color: \"#241430aa\" }}>2 items</span>}\n </h4>\n <ul style={{ listStyle: \"none\", margin: 0, padding: 0, display: \"flex\", flexDirection: \"column\", gap: 8 }}>\n <li style={cardStyle} draggable=\"true\">\n <span style={{ flex: \"1 1 auto\" }}>Draft onboarding flow</span>\n <span style={avatarStyle}>PN</span>\n <button type=\"button\" style={moveBtnStyle}>Move to In progress</button>\n </li>\n <li style={cardStyle} draggable=\"true\">\n <span style={{ flex: \"1 1 auto\" }}>Audit empty states</span>\n <span style={avatarStyle}>PN</span>\n <button type=\"button\" style={moveBtnStyle}>Move to In progress</button>\n </li>\n </ul>\n </section>\n <section aria-labelledby=\"swimlane-col-progress\" style={columnStyle}>\n <h4 id=\"swimlane-col-progress\" style={{ margin: \"0 0 8px\", fontSize: 13, fontWeight: 600, display: \"flex\", justifyContent: \"space-between\", alignItems: \"center\" }}>\n In progress {showCount && <span style={{ fontWeight: 500, fontSize: 11, color: \"#241430aa\" }}>1 item</span>}\n </h4>\n <ul style={{ listStyle: \"none\", margin: 0, padding: 0, display: \"flex\", flexDirection: \"column\", gap: 8 }}>\n <li style={cardStyle} draggable=\"true\">\n <span style={{ flex: \"1 1 auto\" }}>Ship notification prefs</span>\n <span style={avatarStyle}>PN</span>\n <button type=\"button\" style={moveBtnStyle}>Move to Done</button>\n </li>\n </ul>\n </section>\n </div>\n </div>\n </section>\n );\n}" }