<PageHeader
  eyebrow="Component showcase"
  title="Page headers with clear hierarchy"
  description="Use PageHeader for services, directories, legal pages, guides, dashboards, and public information."
  icon="icon-[lucide--panel-top]"
  align="start"
  maxWidth="full"
  showBreadcrumbs="true"
  breadcrumbs='[
    {
      "label": "Home",
      "href": "/",
      "icon": "icon-[lucide--house]"
    },
    {
      "label": "Components",
      "href": "/base"
    },
    {
      "label": "Page header",
      "current": true
    }
  ]'
  breadcrumbParentHref="#page-header-demo"
  primaryLabel="Primary action"
  primaryHref="#primary"
  primaryIcon="icon-[lucide--arrow-down]"
  secondaryLabel="Secondary action"
  secondaryHref="#secondary"
  secondaryIcon="icon-[lucide--house]">
  <div data-slot="meta">
    <div class="showcase-slot">meta slot</div>
  </div>
  <div data-slot="actions">
    <div class="showcase-slot">actions slot</div>
  </div>
</PageHeader>

<PageHeader
  eyebrow="Citizen service"
  title="Track a complaint"
  description="Check the latest status using your complaint reference."
  icon="icon-[lucide--scan-search]"
  align="center"
  compact="true"
  size="sm"
  showBreadcrumbs="true"
  breadcrumbs='[
    {
      "id": "page-header-1-1",
      "key": "page-header-1-1",
      "value": "primary",
      "label": "Secondary workflow",
      "title": "Secondary workflow",
      "description": "A compact configuration designed for dense application layouts.",
      "text": "A configurable sample message.",
      "href": "#page-header-demo",
      "actionHref": "#page-header-demo",
      "actionLabel": "View details",
      "icon": "icon-[lucide--zap]",
      "iconClass": "icon-[lucide--zap]",
      "variant": "secondary",
      "status": "Active",
      "time": "10:15",
      "current": true,
      "selected": true,
      "checked": true,
      "disabled": false,
      "outgoing": false,
      "open": true,
      "number": 1,
      "count": 24,
      "percentage": 48,
      "color": "#0284c7",
      "target": "_self",
      "ariaLabel": "Open secondary workflow 1",
      "items": [
        {
          "label": "Nested option A",
          "value": "nested-a"
        },
        {
          "label": "Nested option B",
          "value": "nested-b"
        }
      ],
      "links": [
        {
          "label": "Documentation",
          "href": "#documentation"
        },
        {
          "label": "API reference",
          "href": "#api-reference"
        }
      ],
      "values": [
        "Included",
        "Standard"
      ]
    },
    {
      "id": "page-header-1-2",
      "key": "page-header-1-2",
      "value": "secondary",
      "label": "Additional option",
      "title": "Supporting example",
      "description": "A compact configuration designed for dense application layouts.",
      "text": "Another configurable message.",
      "href": "#page-header-demo",
      "actionHref": "#page-header-demo",
      "actionLabel": "View details",
      "icon": "icon-[lucide--zap]",
      "iconClass": "icon-[lucide--zap]",
      "variant": "secondary",
      "status": "Active",
      "time": "10:15",
      "current": false,
      "selected": false,
      "checked": false,
      "disabled": false,
      "outgoing": true,
      "open": true,
      "number": 2,
      "count": 48,
      "percentage": 48,
      "color": "#0284c7",
      "target": "_self",
      "ariaLabel": "Open secondary workflow 2",
      "items": [
        {
          "label": "Nested option A",
          "value": "nested-a"
        },
        {
          "label": "Nested option B",
          "value": "nested-b"
        }
      ],
      "links": [
        {
          "label": "Documentation",
          "href": "#documentation"
        },
        {
          "label": "API reference",
          "href": "#api-reference"
        }
      ],
      "values": [
        "Included",
        "Standard"
      ]
    }
  ]'
  breadcrumbParentHref="#page-header-demo"
  primaryLabel="Track status"
  primaryHref="#track"
  secondaryLabel="Compact example"
  secondaryHref="#page-header-demo"
  variant="soft">
  <div data-slot="meta">
    <div class="showcase-slot">meta slot</div>
  </div>
  <div data-slot="actions">
    <div class="showcase-slot">actions slot</div>
  </div>
</PageHeader>

<PageHeader
  eyebrow="Safety guide"
  title="Prepare your family for emergencies"
  description="Practical guidance for creating a plan, preparing supplies, and staying informed."
  icon="icon-[lucide--trash-2]"
  align="center"
  centered="true"
  size="lg"
  maxWidth="wide"
  showBreadcrumbs="true"
  breadcrumbs='[
    {
      "id": "page-header-2-1",
      "key": "page-header-2-1",
      "value": "primary",
      "label": "Advanced workflow",
      "title": "Advanced workflow",
      "description": "A richer configuration with more supporting information and actions.",
      "text": "A configurable sample message.",
      "href": "#page-header-demo",
      "actionHref": "#page-header-demo",
      "actionLabel": "Explore workflow",
      "icon": "icon-[lucide--circle-check]",
      "iconClass": "icon-[lucide--circle-check]",
      "variant": "success",
      "status": "Complete",
      "time": "11:45",
      "current": true,
      "selected": true,
      "checked": true,
      "disabled": false,
      "outgoing": false,
      "open": true,
      "number": 1,
      "count": 32,
      "percentage": 91,
      "color": "#059669",
      "target": "_self",
      "ariaLabel": "Open advanced workflow 1",
      "items": [
        {
          "label": "Nested option A",
          "value": "nested-a"
        },
        {
          "label": "Nested option B",
          "value": "nested-b"
        }
      ],
      "links": [
        {
          "label": "Documentation",
          "href": "#documentation"
        },
        {
          "label": "API reference",
          "href": "#api-reference"
        }
      ],
      "values": [
        "Included",
        "Unlimited"
      ]
    },
    {
      "id": "page-header-2-2",
      "key": "page-header-2-2",
      "value": "secondary",
      "label": "Additional option",
      "title": "Supporting example",
      "description": "A richer configuration with more supporting information and actions.",
      "text": "Another configurable message.",
      "href": "#page-header-demo",
      "actionHref": "#page-header-demo",
      "actionLabel": "Explore workflow",
      "icon": "icon-[lucide--circle-check]",
      "iconClass": "icon-[lucide--circle-check]",
      "variant": "success",
      "status": "Complete",
      "time": "11:45",
      "current": false,
      "selected": false,
      "checked": false,
      "disabled": true,
      "outgoing": true,
      "open": true,
      "number": 2,
      "count": 64,
      "percentage": 91,
      "color": "#059669",
      "target": "_self",
      "ariaLabel": "Open advanced workflow 2",
      "items": [
        {
          "label": "Nested option A",
          "value": "nested-a"
        },
        {
          "label": "Nested option B",
          "value": "nested-b"
        }
      ],
      "links": [
        {
          "label": "Documentation",
          "href": "#documentation"
        },
        {
          "label": "API reference",
          "href": "#api-reference"
        }
      ],
      "values": [
        "Included",
        "Unlimited"
      ]
    }
  ]'
  breadcrumbParentHref="#page-header-demo"
  primaryLabel="Advanced example"
  primaryHref="#page-header-demo"
  secondaryLabel="Advanced example"
  secondaryHref="#page-header-demo"
  variant="minimal">
  <div data-slot="meta">
    <div class="showcase-slot">meta slot</div>
  </div>
  <div data-slot="actions">
    <div class="showcase-slot">actions slot</div>
  </div>
</PageHeader>