page PageHeaderBlock {
 layout = "gallery"
 
 seo { title = "Page Header block" }
 view { <header class="docs-intro"><a href="/block-library">← All blocks</a><h1>Page Header</h1><p>A ready-to-use section. Copy the complete example below.</p></header><section class="block-live-preview"><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" centered="false" compact="false" size="default" 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]" variant="default" borderBottom="true" class="showcase-instance showcase-instance--1" /></section><section class="example-code-panel"><header><h2>Copy this example</h2><button type="button" data-copy-target="#example-source">Copy code</button></header><pre><code id="example-source">page PageHeaderExample <span>&#123;</span>
  view <span>&#123;</span>
    &lt;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" centered="false" compact="false" size="default" maxWidth="full" showBreadcrumbs="true" breadcrumbs='[<span>&#123;</span>"label":"Home","href":"/","icon":"icon-[lucide--house]"<span>&#125;</span>,<span>&#123;</span>"label":"Components","href":"/base"<span>&#125;</span>,<span>&#123;</span>"label":"Page header","current":true<span>&#125;</span>]' breadcrumbParentHref="#page-header-demo" primaryLabel="Primary action" primaryHref="#primary" primaryIcon="icon-[lucide--arrow-down]" secondaryLabel="Secondary action" secondaryHref="#secondary" secondaryIcon="icon-[lucide--house]" variant="default" borderBottom="true" class="showcase-instance showcase-instance--1" /&gt;
  <span>&#125;</span>
<span>&#125;</span></code></pre></section> }
}