{
  "name": "admin-shell-rounded-borderless",
  "kind": "page",
  "primary": "div",
  "page": "/packages/web-components/patterns/admin-shell/admin-shell.examples.html",
  "slots": [],
  "nested": [],
  "attrs": {
    "data-artifact-item": "",
    "data-artifact-label": "borderless rounded — modern aesthetic"
  },
  "html": "<admin-shell class=\"admin-shell-demo\" mode=\"rounded borderless\">\n        <admin-sidebar slot=\"leading\" name=\"demo-rounded\">\n          <admin-topbar slot=\"header\">\n            <admin-entity-item slot=\"heading\">\n              <icon-ui slot=\"icon\" name=\"lightning\"></icon-ui>\n              <span slot=\"label\">Adia Studio</span>\n            </admin-entity-item>\n          </admin-topbar>\n          <section-ui>\n            <nav-ui>\n              <nav-item-ui icon=\"house\" text=\"Home\" selected></nav-item-ui>\n              <nav-item-ui icon=\"tray\" text=\"Inbox\" badge=\"4\"></nav-item-ui>\n              <nav-item-ui icon=\"chart-bar\" text=\"Analytics\"></nav-item-ui>\n              <nav-item-ui icon=\"gear\" text=\"Settings\"></nav-item-ui>\n            </nav-ui>\n          </section-ui>\n          <admin-statusbar slot=\"footer\">\n            <admin-entity-item slot=\"heading\">\n              <avatar-ui slot=\"icon\" text=\"KG\" size=\"sm\"></avatar-ui>\n              <span slot=\"label\">Kim Granlund</span>\n            </admin-entity-item>\n          </admin-statusbar>\n        </admin-sidebar>\n        <admin-content>\n          <admin-topbar>\n            <button-ui data-sidebar-toggle=\"leading\" icon=\"sidebar\" variant=\"ghost\" size=\"sm\"></button-ui>\n            <breadcrumb-ui><span>Home</span></breadcrumb-ui>\n            <span data-spacer></span>\n            <button-ui icon=\"bell\" variant=\"ghost\" size=\"sm\"></button-ui>\n          </admin-topbar>\n          <admin-scroll>\n            <admin-page>\n              <admin-page-header>\n                <header data-flush>\n                  <div><h1>Home</h1></div>\n                </header>\n              </admin-page-header>\n              <admin-page-body>\n                <section>\n                  <div class=\"demo-content-area\"><p>Page body.</p></div>\n                </section>\n              </admin-page-body>\n            </admin-page>\n          </admin-scroll>\n        </admin-content>\n      </admin-shell>",
  "source": "packages/web-components/patterns/admin-shell/admin-shell.examples.html",
  "metadata": {
    "domain": "layout",
    "description": "Rounded borderless admin shell — floating card aesthetic with gap between sidebar and content. Modern SaaS visual style.",
    "keywords": [
      "admin",
      "shell",
      "rounded",
      "borderless",
      "floating",
      "card",
      "sidebar",
      "content",
      "modern",
      "saas",
      "aesthetic",
      "layout"
    ]
  },
  "captured_at": "2026-06-10T20:25:14.783Z",
  "template": [
    {
      "id": "lightning",
      "component": "Icon",
      "slot": "icon",
      "name": "lightning"
    },
    {
      "id": "text",
      "component": "Text",
      "variant": "body",
      "slot": "label",
      "textContent": "Adia Studio"
    },
    {
      "id": "column",
      "component": "Column",
      "slot": "heading",
      "children": [
        "lightning",
        "text"
      ]
    },
    {
      "id": "admin-topbar",
      "component": "AdminTopbar",
      "slot": "header",
      "children": [
        "column"
      ]
    },
    {
      "id": "nav-item",
      "component": "NavItem",
      "icon": "house",
      "selected": true,
      "text": "Home"
    },
    {
      "id": "nav-item-2",
      "component": "NavItem",
      "badge": "4",
      "icon": "tray",
      "text": "Inbox"
    },
    {
      "id": "nav-item-3",
      "component": "NavItem",
      "icon": "chart-bar",
      "text": "Analytics"
    },
    {
      "id": "nav-item-4",
      "component": "NavItem",
      "icon": "gear",
      "text": "Settings"
    },
    {
      "id": "nav",
      "component": "Nav",
      "children": [
        "nav-item",
        "nav-item-2",
        "nav-item-3",
        "nav-item-4"
      ]
    },
    {
      "id": "avatar",
      "component": "Avatar",
      "slot": "icon",
      "size": "sm",
      "text": "KG"
    },
    {
      "id": "text-2",
      "component": "Text",
      "variant": "body",
      "slot": "label",
      "textContent": "Kim Granlund"
    },
    {
      "id": "column-3",
      "component": "Column",
      "slot": "heading",
      "children": [
        "avatar",
        "text-2"
      ]
    },
    {
      "id": "admin-statusbar",
      "component": "AdminStatusbar",
      "slot": "footer",
      "children": [
        "column-3"
      ]
    },
    {
      "id": "demo-rounded",
      "component": "Sidebar",
      "slot": "leading",
      "name": "demo-rounded",
      "children": [
        "admin-topbar",
        "nav",
        "admin-statusbar"
      ]
    },
    {
      "id": "button",
      "component": "Button",
      "icon": "sidebar",
      "size": "sm",
      "variant": "ghost",
      "data-sidebar-toggle": "leading"
    },
    {
      "id": "text-3",
      "component": "Text",
      "variant": "body",
      "textContent": "Home"
    },
    {
      "id": "breadcrumb",
      "component": "Breadcrumb",
      "children": [
        "text-3"
      ]
    },
    {
      "id": "text-4",
      "component": "Text",
      "variant": "body",
      "data-spacer": ""
    },
    {
      "id": "button-2",
      "component": "Button",
      "icon": "bell",
      "size": "sm",
      "variant": "ghost"
    },
    {
      "id": "admin-topbar-2",
      "component": "AdminTopbar",
      "children": [
        "button",
        "breadcrumb",
        "text-4",
        "button-2"
      ]
    },
    {
      "id": "text-5",
      "component": "Text",
      "variant": "display",
      "textContent": "Home"
    },
    {
      "id": "column-4",
      "component": "Column",
      "children": [
        "text-5"
      ]
    },
    {
      "id": "section",
      "component": "Section",
      "children": [
        "column-4"
      ]
    },
    {
      "id": "card",
      "component": "Card",
      "children": [
        "section"
      ]
    },
    {
      "id": "header",
      "component": "Header",
      "data-flush": "",
      "children": [
        "card"
      ]
    },
    {
      "id": "admin-page-header",
      "component": "AdminPageHeader",
      "children": [
        "header"
      ]
    },
    {
      "id": "text-6",
      "component": "Text",
      "variant": "body",
      "textContent": "Page body."
    },
    {
      "id": "section-2",
      "component": "Section",
      "children": [
        "text-6"
      ]
    },
    {
      "id": "admin-page-body",
      "component": "AdminPageBody",
      "children": [
        "section-2"
      ]
    },
    {
      "id": "admin-page",
      "component": "AdminPage",
      "children": [
        "admin-page-header",
        "admin-page-body"
      ]
    },
    {
      "id": "admin-scroll",
      "component": "AdminScroll",
      "children": [
        "admin-page"
      ]
    },
    {
      "id": "admin-content",
      "component": "AdminContent",
      "children": [
        "admin-topbar-2",
        "admin-scroll"
      ]
    },
    {
      "id": "root",
      "component": "AdminShell",
      "children": [
        "demo-rounded",
        "admin-content"
      ]
    }
  ]
}