{
  "element": "nve-page-header",
  "entrypoint": "@nvidia-elements/core/page-header/page-header.examples.json",
  "items": [
    {
      "id": "page-header",
      "name": "Default",
      "template": "<nve-page-header>\n  <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n  <h2 slot=\"prefix\" nve-text=\"heading sm\">Infrastructure</h2>\n  <nve-button selected container=\"flat\"><a href=\"#\">Link 1</a></nve-button>\n  <nve-button container=\"flat\"><a href=\"#\">Link 2</a></nve-button>\n  <nve-icon-button slot=\"suffix\" container=\"flat\" icon-name=\"chat-bubble\"></nve-icon-button>\n  <nve-icon-button slot=\"suffix\" container=\"flat\" icon-name=\"search\"></nve-icon-button>\n  <nve-icon-button slot=\"suffix\" container=\"flat\" icon-name=\"switch-apps\"></nve-icon-button>\n  <nve-icon-button slot=\"suffix\" interaction=\"emphasis\" size=\"sm\">EL</nve-icon-button>\n</nve-page-header>\n",
      "summary": "Basic page header with logo, navigation links, and user actions in a standard layout structure.",
      "description": "",
      "composition": true,
      "tags": []
    },
    {
      "id": "page-header-dropdown-menu",
      "name": "DropdownMenu",
      "template": "<nve-page-header>\n  <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n  <h2 slot=\"prefix\" nve-text=\"heading sm\">Infrastructure</h2>\n  <nve-button selected container=\"flat\"><a href=\"#\">Link 1</a></nve-button>\n  <nve-button container=\"flat\"><a href=\"#\">Link 2</a></nve-button>\n  <nve-icon-button slot=\"suffix\" interaction=\"emphasis\" size=\"sm\" popovertarget=\"page-header-dropdown\"\n    >EL</nve-icon-button\n  >\n</nve-page-header>\n<nve-dropdown position=\"bottom\" id=\"page-header-dropdown\">\n  <nve-menu>\n    <nve-menu-item><nve-icon name=\"person\"></nve-icon> Menu Item</nve-menu-item>\n    <nve-menu-item><nve-icon name=\"gear\"></nve-icon> Menu Item</nve-menu-item>\n    <nve-menu-item><nve-icon name=\"star\"></nve-icon> Menu Item</nve-menu-item>\n    <nve-divider></nve-divider>\n    <nve-menu-item><nve-icon name=\"logout\"></nve-icon> Menu Item</nve-menu-item>\n  </nve-menu>\n</nve-dropdown>\n",
      "summary": "Use dropdowns and menus to allow progressive disclosure of extra navigation or global user actions.",
      "description": "",
      "composition": true,
      "tags": []
    },
    {
      "id": "page-header-menu-button",
      "name": "MenuButton",
      "template": "<nve-page-header>\n  <nve-icon-button slot=\"prefix\" container=\"flat\" icon-name=\"menu\" aria-label=\"menu\"></nve-icon-button>\n  <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n  <h2 slot=\"prefix\" nve-text=\"heading sm\">Infrastructure</h2>\n  <nve-button selected container=\"flat\"><a href=\"#\">Link 1</a></nve-button>\n  <nve-button container=\"flat\"><a href=\"#\">Link 2</a></nve-button>\n  <nve-icon-button slot=\"suffix\" container=\"flat\" icon-name=\"chat-bubble\"></nve-icon-button>\n  <nve-icon-button slot=\"suffix\" container=\"flat\" icon-name=\"search\"></nve-icon-button>\n  <nve-icon-button slot=\"suffix\" container=\"flat\" icon-name=\"switch-apps\"></nve-icon-button>\n  <nve-icon-button slot=\"suffix\" interaction=\"emphasis\" size=\"sm\">EL</nve-icon-button>\n</nve-page-header>\n",
      "summary": "Use a Icon Button to represent collapsible top-level navigation, optimal for mobile or constrained viewport sizes.",
      "description": "",
      "composition": true,
      "tags": []
    },
    {
      "id": "page-header-app-logo",
      "name": "AppLogo",
      "template": "<nve-page-header>\n  <nve-logo slot=\"prefix\" size=\"sm\" color=\"yellow-nova\">AV</nve-logo>\n  <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n  <nve-button container=\"flat\" selected><a href=\"#\">Link 1</a></nve-button>\n  <nve-button container=\"flat\"><a href=\"#\">Link 2</a></nve-button>\n  <nve-icon-button slot=\"suffix\" container=\"flat\" icon-name=\"chat-bubble\"></nve-icon-button>\n  <nve-icon-button slot=\"suffix\" container=\"flat\" icon-name=\"search\"></nve-icon-button>\n  <nve-icon-button slot=\"suffix\" container=\"flat\" icon-name=\"switch-apps\"></nve-icon-button>\n  <nve-icon-button slot=\"suffix\" interaction=\"emphasis\" size=\"sm\">EL</nve-icon-button>\n</nve-page-header>\n",
      "summary": "Use the Logo element when representing an application that is part of a suite of applications in a given problem domain.",
      "description": "",
      "composition": true,
      "tags": []
    },
    {
      "id": "page-header-prefix-navigation",
      "name": "PrefixNavigation",
      "template": "<nve-page-header>\n  <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n  <h2 slot=\"prefix\" nve-text=\"heading sm\">Infrastructure</h2>\n  <nve-button container=\"flat\"><a href=\"#\">Features</a></nve-button>\n  <nve-button container=\"flat\"><a href=\"#\">Guide</a></nve-button>\n  <nve-button container=\"flat\"><a href=\"#\">Docs</a></nve-button>\n  <nve-button container=\"flat\"><a href=\"#\">Teams</a></nve-button>\n  <nve-button slot=\"suffix\" container=\"flat\"><a href=\"#\">Login</a></nve-button>\n  <nve-button slot=\"suffix\" interaction=\"emphasis\" size=\"sm\"><a href=\"#\">Start Building</a></nve-button>\n</nve-page-header>\n",
      "summary": "Page header with primary navigation positioned after the logo and branding area.",
      "description": "",
      "composition": true,
      "tags": []
    },
    {
      "id": "page-header-center-navigation",
      "name": "CenterNavigation",
      "template": "<nve-page-header>\n  <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n  <h2 slot=\"prefix\" nve-text=\"heading sm\">Infrastructure</h2>\n  <div nve-layout=\"row align:center gap:xxs full\">\n    <nve-button container=\"flat\"><a href=\"#\">Features</a></nve-button>\n    <nve-button container=\"flat\"><a href=\"#\">Guide</a></nve-button>\n    <nve-button container=\"flat\"><a href=\"#\">Docs</a></nve-button>\n    <nve-button container=\"flat\"><a href=\"#\">Teams</a></nve-button>\n  </div>\n  <nve-button slot=\"suffix\" container=\"flat\"><a href=\"#\">Login</a></nve-button>\n  <nve-button slot=\"suffix\" interaction=\"emphasis\" size=\"sm\"><a href=\"#\">Start Building</a></nve-button>\n</nve-page-header>\n",
      "summary": "Page header with navigation centered in the available space for balanced visual hierarchy.",
      "description": "",
      "composition": true,
      "tags": []
    },
    {
      "id": "page-header-suffix-navigation",
      "name": "SuffixNavigation",
      "template": "<nve-page-header>\n  <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n  <h2 slot=\"prefix\" nve-text=\"heading sm\">Infrastructure</h2>\n  <nve-button slot=\"suffix\" container=\"flat\"><a href=\"#\">Features</a></nve-button>\n  <nve-button slot=\"suffix\" container=\"flat\"><a href=\"#\">Guide</a></nve-button>\n  <nve-button slot=\"suffix\" container=\"flat\"><a href=\"#\">Docs</a></nve-button>\n  <nve-button slot=\"suffix\" container=\"flat\"><a href=\"#\">Teams</a></nve-button>\n  <nve-button slot=\"suffix\" container=\"flat\"><a href=\"#\">Login</a></nve-button>\n  <nve-button slot=\"suffix\" interaction=\"emphasis\" size=\"sm\"><a href=\"#\">Start Building</a></nve-button>\n</nve-page-header>\n",
      "summary": "Page header with all navigation positioned at the end for common and persistent user actions between page navigation.",
      "description": "",
      "composition": true,
      "tags": []
    },
    {
      "id": "page-header-search",
      "name": "Search",
      "template": "<nve-page-header>\n  <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n  <h2 slot=\"prefix\" nve-text=\"heading sm\">Infrastructure</h2>\n  <nve-button container=\"flat\"><a href=\"#\">Link 1</a></nve-button>\n  <nve-button container=\"flat\"><a href=\"#\">Link 2</a></nve-button>\n  <nve-search slot=\"suffix\" rounded style=\"width: 220px\">\n    <input type=\"search\" aria-label=\"search\" />\n  </nve-search>\n  <nve-button slot=\"suffix\" container=\"flat\"><a href=\"#\">Login</a></nve-button>\n</nve-page-header>\n",
      "summary": "Page header with integrated search functionality for content discovery within the application.",
      "description": "",
      "composition": true,
      "tags": []
    },
    {
      "id": "page-header-user-detail",
      "name": "UserDetail",
      "template": "<nve-page-header>\n  <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n  <h2 slot=\"prefix\" nve-text=\"heading sm\">Infrastructure</h2>\n  <nve-button container=\"flat\"><a href=\"#\">Link 1</a></nve-button>\n  <nve-button container=\"flat\"><a href=\"#\">Link 2</a></nve-button>\n  <nve-icon-button slot=\"suffix\" interaction=\"emphasis\" size=\"sm\">GH</nve-icon-button>\n  <div slot=\"suffix\" nve-layout=\"column gap:md\">\n    <p nve-text=\"label sm trim:none\">Grace Hopper</p>\n    <p nve-text=\"body sm muted trim:none nowrap\">infra-0087ef65-19e80</p>\n  </div>\n</nve-page-header>\n",
      "summary": "Page header displaying user information and avatar for personalized application experiences.",
      "description": "",
      "composition": true,
      "tags": []
    }
  ]
}