{
  "name": "tabs-with-panels",
  "kind": "block",
  "primary": "section",
  "page": "/catalog/ui-patterns/v050-mode-c-blocks/v050-mode-c-blocks.contents.html",
  "slots": [],
  "nested": [],
  "attrs": {},
  "html": "<section>\n    <card-ui>\n      <header>\n        <tabs-ui value=\"overview\">\n          <tab-ui value=\"overview\" text=\"Overview\"></tab-ui>\n          <tab-ui value=\"usage\" text=\"Usage\"></tab-ui>\n          <tab-ui value=\"settings\" text=\"Settings\"></tab-ui>\n        </tabs-ui>\n      </header>\n      <section>\n        <col-ui gap=\"3\">\n          <h3>Overview</h3>\n          <text-ui color=\"subtle\">Welcome to your workspace overview. Quick stats, recent activity, and getting-started shortcuts live here.</text-ui>\n          <grid-ui columns=\"1 2@sm\" gap=\"3\">\n            <card-ui><section><text-ui strong>4</text-ui><text-ui size=\"sm\" color=\"subtle\">Active projects</text-ui></section></card-ui>\n            <card-ui><section><text-ui strong>28</text-ui><text-ui size=\"sm\" color=\"subtle\">Team members</text-ui></section></card-ui>\n          </grid-ui>\n        </col-ui>\n      </section>\n    </card-ui>\n  </section>",
  "source": "catalog/ui-patterns/v050-mode-c-blocks/v050-mode-c-blocks.contents.html",
  "metadata": {
    "domain": "layout",
    "description": "Tabs component with N panels — each tab reveals its corresponding panel content area.",
    "keywords": [
      "tabs",
      "panels",
      "navigation",
      "switch",
      "sections",
      "views",
      "content-areas",
      "tab-strip"
    ]
  },
  "captured_at": "2026-06-07T19:28:13.657Z",
  "template": [
    {
      "id": "tab",
      "component": "Tab",
      "text": "Overview",
      "value": "overview"
    },
    {
      "id": "tab-2",
      "component": "Tab",
      "text": "Usage",
      "value": "usage"
    },
    {
      "id": "tab-3",
      "component": "Tab",
      "text": "Settings",
      "value": "settings"
    },
    {
      "id": "tabs",
      "component": "Tabs",
      "value": "overview",
      "children": [
        "tab",
        "tab-2",
        "tab-3"
      ]
    },
    {
      "id": "header",
      "component": "Header",
      "children": [
        "tabs"
      ]
    },
    {
      "id": "text",
      "component": "Text",
      "variant": "heading",
      "textContent": "Overview"
    },
    {
      "id": "text-2",
      "component": "Text",
      "color": "subtle",
      "textContent": "Welcome to your workspace overview. Quick stats, recent activity, and getting-started shortcuts live here."
    },
    {
      "id": "text-3",
      "component": "Text",
      "strong": true,
      "textContent": "4"
    },
    {
      "id": "text-4",
      "component": "Text",
      "color": "subtle",
      "size": "sm",
      "textContent": "Active projects"
    },
    {
      "id": "section-2",
      "component": "Section",
      "children": [
        "column-2"
      ]
    },
    {
      "id": "column-2",
      "component": "Column",
      "children": [
        "text-3",
        "text-4"
      ]
    },
    {
      "id": "card-2",
      "component": "Card",
      "children": [
        "section-2"
      ]
    },
    {
      "id": "text-5",
      "component": "Text",
      "strong": true,
      "textContent": "28"
    },
    {
      "id": "text-6",
      "component": "Text",
      "color": "subtle",
      "size": "sm",
      "textContent": "Team members"
    },
    {
      "id": "section-3",
      "component": "Section",
      "children": [
        "column-3"
      ]
    },
    {
      "id": "column-3",
      "component": "Column",
      "children": [
        "text-5",
        "text-6"
      ]
    },
    {
      "id": "card-3",
      "component": "Card",
      "children": [
        "section-3"
      ]
    },
    {
      "id": "grid",
      "component": "Grid",
      "columns": "1 2@sm",
      "gap": "3",
      "children": [
        "card-2",
        "card-3"
      ]
    },
    {
      "id": "column",
      "component": "Column",
      "gap": "3",
      "children": [
        "text",
        "text-2",
        "grid"
      ]
    },
    {
      "id": "section",
      "component": "Section",
      "children": [
        "column"
      ]
    },
    {
      "id": "card",
      "component": "Card",
      "children": [
        "header",
        "section"
      ]
    },
    {
      "id": "root",
      "component": "Section",
      "children": [
        "card"
      ]
    }
  ]
}