{
  "name": "admin-page-header-with-tabs",
  "kind": "block",
  "primary": "admin-page-header",
  "page": "/site/patterns/admin-page-header.html",
  "slots": [],
  "nested": [],
  "attrs": {},
  "html": "<admin-page-header>\n            <header>\n              <div>\n                <h1>Dashboard</h1>\n                <div data-actions>\n                  <button-ui text=\"Refresh\" icon=\"arrow-clockwise\" variant=\"ghost\" size=\"sm\"></button-ui>\n                </div>\n              </div>\n              <p>Welcome back. Here's what's happening today.</p>\n              <tabs-ui value=\"overview\">\n                <tab-ui value=\"overview\" text=\"Overview\"></tab-ui>\n                <tab-ui value=\"audience\" text=\"Audience\"></tab-ui>\n                <tab-ui value=\"acquisition\" text=\"Acquisition\"></tab-ui>\n                <tab-ui value=\"conversion\" text=\"Conversion\"></tab-ui>\n                <tab-ui value=\"reports\" text=\"Reports\"></tab-ui>\n              </tabs-ui>\n            </header>\n          </admin-page-header>",
  "source": "site/pages/patterns/admin-page-header.html",
  "metadata": {
    "domain": "layout",
    "description": "Admin page header band with a tabs-ui sub-view switcher after the description. For pages with multiple panels that swap inside the same shell (dashboard tabs, settings sections).",
    "keywords": [
      "admin",
      "page",
      "header",
      "tabs",
      "sub-view",
      "switcher",
      "dashboard",
      "panels",
      "tabs-ui",
      "tab-ui",
      "overview",
      "band",
      "title",
      "admin-page-header",
      "layout",
      "navigation"
    ]
  },
  "captured_at": "2026-06-09T18:16:34.245Z",
  "template": [
    {
      "id": "text",
      "component": "Text",
      "variant": "display",
      "textContent": "Dashboard"
    },
    {
      "id": "button",
      "component": "Button",
      "icon": "arrow-clockwise",
      "size": "sm",
      "text": "Refresh",
      "variant": "ghost"
    },
    {
      "id": "column",
      "component": "Column",
      "data-actions": "",
      "children": [
        "button"
      ]
    },
    {
      "id": "column-2",
      "component": "Column",
      "children": [
        "text",
        "column"
      ]
    },
    {
      "id": "section",
      "component": "Section",
      "children": [
        "column-2"
      ]
    },
    {
      "id": "card",
      "component": "Card",
      "children": [
        "section"
      ]
    },
    {
      "id": "text-2",
      "component": "Text",
      "variant": "body",
      "textContent": "Welcome back. Here's what's happening today."
    },
    {
      "id": "tab",
      "component": "Tab",
      "text": "Overview",
      "value": "overview"
    },
    {
      "id": "tab-2",
      "component": "Tab",
      "text": "Audience",
      "value": "audience"
    },
    {
      "id": "tab-3",
      "component": "Tab",
      "text": "Acquisition",
      "value": "acquisition"
    },
    {
      "id": "tab-4",
      "component": "Tab",
      "text": "Conversion",
      "value": "conversion"
    },
    {
      "id": "tab-5",
      "component": "Tab",
      "text": "Reports",
      "value": "reports"
    },
    {
      "id": "tabs",
      "component": "Tabs",
      "value": "overview",
      "children": [
        "tab",
        "tab-2",
        "tab-3",
        "tab-4",
        "tab-5"
      ]
    },
    {
      "id": "header",
      "component": "Header",
      "children": [
        "card",
        "text-2",
        "tabs"
      ]
    },
    {
      "id": "root",
      "component": "AdminPageHeader",
      "children": [
        "header"
      ]
    }
  ]
}