{
  "name": "kanban-board-3col",
  "kind": "block",
  "primary": "grid-ui",
  "page": "/catalog/ui-patterns/app/kanban-board-3col/kanban-board-3col.contents.html",
  "slots": [],
  "nested": [],
  "attrs": {
    "columns": "3",
    "gap": "4"
  },
  "html": "<grid-ui columns=\"3\" gap=\"4\" style=\"min-width: 48rem\">\n  <!-- TO DO column -->\n  <card-ui>\n    <header>\n      <text-ui slot=\"heading\" weight=\"semibold\">To Do</text-ui>\n      <badge-ui slot=\"action\" text=\"3\" variant=\"muted\"></badge-ui>\n    </header>\n    <section>\n      <col-ui gap=\"2\">\n        <card-ui>\n          <section>\n            <col-ui gap=\"2\">\n              <row-ui gap=\"2\" align=\"center\">\n                <badge-ui text=\"High\" variant=\"danger\" size=\"sm\"></badge-ui>\n                <tag-ui text=\"Design\"></tag-ui>\n              </row-ui>\n              <text-ui strong>Design system tokens audit</text-ui>\n              <row-ui gap=\"2\" align=\"center\">\n                <avatar-ui text=\"Jane Doe\" size=\"xs\"></avatar-ui>\n                <text-ui size=\"sm\" color=\"subtle\">Jane Doe</text-ui>\n              </row-ui>\n            </col-ui>\n          </section>\n        </card-ui>\n        <card-ui>\n          <section>\n            <col-ui gap=\"2\">\n              <row-ui gap=\"2\" align=\"center\">\n                <badge-ui text=\"Medium\" variant=\"warning\" size=\"sm\"></badge-ui>\n                <tag-ui text=\"Engineering\"></tag-ui>\n              </row-ui>\n              <text-ui strong>Component accessibility review</text-ui>\n              <row-ui gap=\"2\" align=\"center\">\n                <avatar-ui text=\"Alex Chen\" size=\"xs\"></avatar-ui>\n                <text-ui size=\"sm\" color=\"subtle\">Alex Chen</text-ui>\n              </row-ui>\n            </col-ui>\n          </section>\n        </card-ui>\n        <card-ui>\n          <section>\n            <col-ui gap=\"2\">\n              <row-ui gap=\"2\" align=\"center\">\n                <badge-ui text=\"Low\" variant=\"muted\" size=\"sm\"></badge-ui>\n              </row-ui>\n              <text-ui strong>Update changelog feed</text-ui>\n              <row-ui gap=\"2\" align=\"center\">\n                <avatar-ui text=\"Sarah Park\" size=\"xs\"></avatar-ui>\n                <text-ui size=\"sm\" color=\"subtle\">Sarah Park</text-ui>\n              </row-ui>\n            </col-ui>\n          </section>\n        </card-ui>\n      </col-ui>\n    </section>\n  </card-ui>\n  <!-- IN PROGRESS column -->\n  <card-ui>\n    <header>\n      <text-ui slot=\"heading\" weight=\"semibold\">In Progress</text-ui>\n      <badge-ui slot=\"action\" text=\"2\" variant=\"accent\"></badge-ui>\n    </header>\n    <section>\n      <col-ui gap=\"2\">\n        <card-ui>\n          <section>\n            <col-ui gap=\"2\">\n              <row-ui gap=\"2\" align=\"center\">\n                <badge-ui text=\"High\" variant=\"danger\" size=\"sm\"></badge-ui>\n                <tag-ui text=\"Design\"></tag-ui>\n              </row-ui>\n              <text-ui strong>Dark mode token palette</text-ui>\n              <row-ui gap=\"2\" align=\"center\">\n                <avatar-ui text=\"Jane Doe\" size=\"xs\"></avatar-ui>\n                <text-ui size=\"sm\" color=\"subtle\">Jane Doe</text-ui>\n              </row-ui>\n            </col-ui>\n          </section>\n        </card-ui>\n        <card-ui>\n          <section>\n            <col-ui gap=\"2\">\n              <row-ui gap=\"2\" align=\"center\">\n                <badge-ui text=\"Medium\" variant=\"warning\" size=\"sm\"></badge-ui>\n                <tag-ui text=\"Engineering\"></tag-ui>\n              </row-ui>\n              <text-ui strong>Button variant states</text-ui>\n              <row-ui gap=\"2\" align=\"center\">\n                <avatar-ui text=\"Marco Ruiz\" size=\"xs\"></avatar-ui>\n                <text-ui size=\"sm\" color=\"subtle\">Marco Ruiz</text-ui>\n              </row-ui>\n            </col-ui>\n          </section>\n        </card-ui>\n      </col-ui>\n    </section>\n  </card-ui>\n  <!-- DONE column -->\n  <card-ui>\n    <header>\n      <text-ui slot=\"heading\" weight=\"semibold\">Done</text-ui>\n      <badge-ui slot=\"action\" text=\"5\" variant=\"success\"></badge-ui>\n    </header>\n    <section>\n      <col-ui gap=\"2\">\n        <card-ui>\n          <section>\n            <col-ui gap=\"2\">\n              <row-ui gap=\"2\" align=\"center\">\n                <badge-ui text=\"Done\" variant=\"success\" size=\"sm\"></badge-ui>\n                <tag-ui text=\"Design\"></tag-ui>\n              </row-ui>\n              <text-ui strong>Typography scale</text-ui>\n              <row-ui gap=\"2\" align=\"center\">\n                <avatar-ui text=\"Jane Doe\" size=\"xs\"></avatar-ui>\n                <text-ui size=\"sm\" color=\"subtle\">Jane Doe</text-ui>\n              </row-ui>\n            </col-ui>\n          </section>\n        </card-ui>\n        <card-ui>\n          <section>\n            <col-ui gap=\"2\">\n              <row-ui gap=\"2\" align=\"center\">\n                <badge-ui text=\"Done\" variant=\"success\" size=\"sm\"></badge-ui>\n                <tag-ui text=\"Engineering\"></tag-ui>\n              </row-ui>\n              <text-ui strong>Spacing token system</text-ui>\n              <row-ui gap=\"2\" align=\"center\">\n                <avatar-ui text=\"Alex Chen\" size=\"xs\"></avatar-ui>\n                <text-ui size=\"sm\" color=\"subtle\">Alex Chen</text-ui>\n              </row-ui>\n            </col-ui>\n          </section>\n        </card-ui>\n      </col-ui>\n    </section>\n  </card-ui>\n</grid-ui>",
  "source": "catalog/ui-patterns/app/kanban-board-3col/kanban-board-3col.contents.html",
  "metadata": {
    "domain": "layout",
    "description": "Kanban board with todo, in progress, and done columns. Task cards with title, assignee avatar, priority badge, and label tag.",
    "keywords": [
      "kanban",
      "board",
      "todo",
      "in-progress",
      "done",
      "columns",
      "tasks",
      "project-management",
      "cards",
      "assignee",
      "priority",
      "label",
      "workflow",
      "drag-drop",
      "sprint"
    ]
  },
  "captured_at": "2026-06-07T19:28:13.657Z",
  "template": [
    {
      "id": "text",
      "component": "Text",
      "slot": "heading",
      "weight": "semibold",
      "textContent": "To Do"
    },
    {
      "id": "badge",
      "component": "Badge",
      "slot": "action",
      "text": "3",
      "variant": "muted"
    },
    {
      "id": "header",
      "component": "Header",
      "children": [
        "text",
        "badge"
      ]
    },
    {
      "id": "badge-2",
      "component": "Badge",
      "size": "sm",
      "text": "High",
      "variant": "danger"
    },
    {
      "id": "tag",
      "component": "Tag",
      "text": "Design"
    },
    {
      "id": "row",
      "component": "Row",
      "align": "center",
      "gap": "2",
      "children": [
        "badge-2",
        "tag"
      ]
    },
    {
      "id": "text-2",
      "component": "Text",
      "strong": true,
      "textContent": "Design system tokens audit"
    },
    {
      "id": "avatar",
      "component": "Avatar",
      "size": "xs",
      "text": "Jane Doe"
    },
    {
      "id": "text-3",
      "component": "Text",
      "color": "subtle",
      "size": "sm",
      "textContent": "Jane Doe"
    },
    {
      "id": "row-2",
      "component": "Row",
      "align": "center",
      "gap": "2",
      "children": [
        "avatar",
        "text-3"
      ]
    },
    {
      "id": "column-2",
      "component": "Column",
      "gap": "2",
      "children": [
        "row",
        "text-2",
        "row-2"
      ]
    },
    {
      "id": "section-2",
      "component": "Section",
      "children": [
        "column-2"
      ]
    },
    {
      "id": "card-2",
      "component": "Card",
      "children": [
        "section-2"
      ]
    },
    {
      "id": "badge-3",
      "component": "Badge",
      "size": "sm",
      "text": "Medium",
      "variant": "warning"
    },
    {
      "id": "tag-2",
      "component": "Tag",
      "text": "Engineering"
    },
    {
      "id": "row-3",
      "component": "Row",
      "align": "center",
      "gap": "2",
      "children": [
        "badge-3",
        "tag-2"
      ]
    },
    {
      "id": "text-4",
      "component": "Text",
      "strong": true,
      "textContent": "Component accessibility review"
    },
    {
      "id": "avatar-2",
      "component": "Avatar",
      "size": "xs",
      "text": "Alex Chen"
    },
    {
      "id": "text-5",
      "component": "Text",
      "color": "subtle",
      "size": "sm",
      "textContent": "Alex Chen"
    },
    {
      "id": "row-4",
      "component": "Row",
      "align": "center",
      "gap": "2",
      "children": [
        "avatar-2",
        "text-5"
      ]
    },
    {
      "id": "column-3",
      "component": "Column",
      "gap": "2",
      "children": [
        "row-3",
        "text-4",
        "row-4"
      ]
    },
    {
      "id": "section-3",
      "component": "Section",
      "children": [
        "column-3"
      ]
    },
    {
      "id": "card-3",
      "component": "Card",
      "children": [
        "section-3"
      ]
    },
    {
      "id": "badge-4",
      "component": "Badge",
      "size": "sm",
      "text": "Low",
      "variant": "muted"
    },
    {
      "id": "row-5",
      "component": "Row",
      "align": "center",
      "gap": "2",
      "children": [
        "badge-4"
      ]
    },
    {
      "id": "text-6",
      "component": "Text",
      "strong": true,
      "textContent": "Update changelog feed"
    },
    {
      "id": "avatar-3",
      "component": "Avatar",
      "size": "xs",
      "text": "Sarah Park"
    },
    {
      "id": "text-7",
      "component": "Text",
      "color": "subtle",
      "size": "sm",
      "textContent": "Sarah Park"
    },
    {
      "id": "row-6",
      "component": "Row",
      "align": "center",
      "gap": "2",
      "children": [
        "avatar-3",
        "text-7"
      ]
    },
    {
      "id": "column-4",
      "component": "Column",
      "gap": "2",
      "children": [
        "row-5",
        "text-6",
        "row-6"
      ]
    },
    {
      "id": "section-4",
      "component": "Section",
      "children": [
        "column-4"
      ]
    },
    {
      "id": "card-4",
      "component": "Card",
      "children": [
        "section-4"
      ]
    },
    {
      "id": "column",
      "component": "Column",
      "gap": "2",
      "children": [
        "card-2",
        "card-3",
        "card-4"
      ]
    },
    {
      "id": "section",
      "component": "Section",
      "children": [
        "column"
      ]
    },
    {
      "id": "card",
      "component": "Card",
      "children": [
        "header",
        "section"
      ]
    },
    {
      "id": "text-8",
      "component": "Text",
      "slot": "heading",
      "weight": "semibold",
      "textContent": "In Progress"
    },
    {
      "id": "badge-5",
      "component": "Badge",
      "slot": "action",
      "text": "2",
      "variant": "accent"
    },
    {
      "id": "header-2",
      "component": "Header",
      "children": [
        "text-8",
        "badge-5"
      ]
    },
    {
      "id": "badge-6",
      "component": "Badge",
      "size": "sm",
      "text": "High",
      "variant": "danger"
    },
    {
      "id": "tag-3",
      "component": "Tag",
      "text": "Design"
    },
    {
      "id": "row-7",
      "component": "Row",
      "align": "center",
      "gap": "2",
      "children": [
        "badge-6",
        "tag-3"
      ]
    },
    {
      "id": "text-9",
      "component": "Text",
      "strong": true,
      "textContent": "Dark mode token palette"
    },
    {
      "id": "avatar-4",
      "component": "Avatar",
      "size": "xs",
      "text": "Jane Doe"
    },
    {
      "id": "text-10",
      "component": "Text",
      "color": "subtle",
      "size": "sm",
      "textContent": "Jane Doe"
    },
    {
      "id": "row-8",
      "component": "Row",
      "align": "center",
      "gap": "2",
      "children": [
        "avatar-4",
        "text-10"
      ]
    },
    {
      "id": "column-6",
      "component": "Column",
      "gap": "2",
      "children": [
        "row-7",
        "text-9",
        "row-8"
      ]
    },
    {
      "id": "section-6",
      "component": "Section",
      "children": [
        "column-6"
      ]
    },
    {
      "id": "card-6",
      "component": "Card",
      "children": [
        "section-6"
      ]
    },
    {
      "id": "badge-7",
      "component": "Badge",
      "size": "sm",
      "text": "Medium",
      "variant": "warning"
    },
    {
      "id": "tag-4",
      "component": "Tag",
      "text": "Engineering"
    },
    {
      "id": "row-9",
      "component": "Row",
      "align": "center",
      "gap": "2",
      "children": [
        "badge-7",
        "tag-4"
      ]
    },
    {
      "id": "text-11",
      "component": "Text",
      "strong": true,
      "textContent": "Button variant states"
    },
    {
      "id": "avatar-5",
      "component": "Avatar",
      "size": "xs",
      "text": "Marco Ruiz"
    },
    {
      "id": "text-12",
      "component": "Text",
      "color": "subtle",
      "size": "sm",
      "textContent": "Marco Ruiz"
    },
    {
      "id": "row-10",
      "component": "Row",
      "align": "center",
      "gap": "2",
      "children": [
        "avatar-5",
        "text-12"
      ]
    },
    {
      "id": "column-7",
      "component": "Column",
      "gap": "2",
      "children": [
        "row-9",
        "text-11",
        "row-10"
      ]
    },
    {
      "id": "section-7",
      "component": "Section",
      "children": [
        "column-7"
      ]
    },
    {
      "id": "card-7",
      "component": "Card",
      "children": [
        "section-7"
      ]
    },
    {
      "id": "column-5",
      "component": "Column",
      "gap": "2",
      "children": [
        "card-6",
        "card-7"
      ]
    },
    {
      "id": "section-5",
      "component": "Section",
      "children": [
        "column-5"
      ]
    },
    {
      "id": "card-5",
      "component": "Card",
      "children": [
        "header-2",
        "section-5"
      ]
    },
    {
      "id": "text-13",
      "component": "Text",
      "slot": "heading",
      "weight": "semibold",
      "textContent": "Done"
    },
    {
      "id": "badge-8",
      "component": "Badge",
      "slot": "action",
      "text": "5",
      "variant": "success"
    },
    {
      "id": "header-3",
      "component": "Header",
      "children": [
        "text-13",
        "badge-8"
      ]
    },
    {
      "id": "badge-9",
      "component": "Badge",
      "size": "sm",
      "text": "Done",
      "variant": "success"
    },
    {
      "id": "tag-5",
      "component": "Tag",
      "text": "Design"
    },
    {
      "id": "row-11",
      "component": "Row",
      "align": "center",
      "gap": "2",
      "children": [
        "badge-9",
        "tag-5"
      ]
    },
    {
      "id": "text-14",
      "component": "Text",
      "strong": true,
      "textContent": "Typography scale"
    },
    {
      "id": "avatar-6",
      "component": "Avatar",
      "size": "xs",
      "text": "Jane Doe"
    },
    {
      "id": "text-15",
      "component": "Text",
      "color": "subtle",
      "size": "sm",
      "textContent": "Jane Doe"
    },
    {
      "id": "row-12",
      "component": "Row",
      "align": "center",
      "gap": "2",
      "children": [
        "avatar-6",
        "text-15"
      ]
    },
    {
      "id": "column-9",
      "component": "Column",
      "gap": "2",
      "children": [
        "row-11",
        "text-14",
        "row-12"
      ]
    },
    {
      "id": "section-9",
      "component": "Section",
      "children": [
        "column-9"
      ]
    },
    {
      "id": "card-9",
      "component": "Card",
      "children": [
        "section-9"
      ]
    },
    {
      "id": "badge-10",
      "component": "Badge",
      "size": "sm",
      "text": "Done",
      "variant": "success"
    },
    {
      "id": "tag-6",
      "component": "Tag",
      "text": "Engineering"
    },
    {
      "id": "row-13",
      "component": "Row",
      "align": "center",
      "gap": "2",
      "children": [
        "badge-10",
        "tag-6"
      ]
    },
    {
      "id": "text-16",
      "component": "Text",
      "strong": true,
      "textContent": "Spacing token system"
    },
    {
      "id": "avatar-7",
      "component": "Avatar",
      "size": "xs",
      "text": "Alex Chen"
    },
    {
      "id": "text-17",
      "component": "Text",
      "color": "subtle",
      "size": "sm",
      "textContent": "Alex Chen"
    },
    {
      "id": "row-14",
      "component": "Row",
      "align": "center",
      "gap": "2",
      "children": [
        "avatar-7",
        "text-17"
      ]
    },
    {
      "id": "column-10",
      "component": "Column",
      "gap": "2",
      "children": [
        "row-13",
        "text-16",
        "row-14"
      ]
    },
    {
      "id": "section-10",
      "component": "Section",
      "children": [
        "column-10"
      ]
    },
    {
      "id": "card-10",
      "component": "Card",
      "children": [
        "section-10"
      ]
    },
    {
      "id": "column-8",
      "component": "Column",
      "gap": "2",
      "children": [
        "card-9",
        "card-10"
      ]
    },
    {
      "id": "section-8",
      "component": "Section",
      "children": [
        "column-8"
      ]
    },
    {
      "id": "card-8",
      "component": "Card",
      "children": [
        "header-3",
        "section-8"
      ]
    },
    {
      "id": "root",
      "component": "Grid",
      "columns": "3",
      "gap": "4",
      "children": [
        "card",
        "card-5",
        "card-8"
      ]
    }
  ]
}