Usage

<SPageHeader title="Component name" description="A one-line summary." />

This docs site uses it on every component page (via page.title/page.description from frontmatter), fixing a gap where those fields previously went completely unused.

Assembling a full page layout

PageHeader is only the top of the main content column - this docs site wraps four components together into the full page shell you're reading right now: a left PageAside wrapping a ContentNavigation for the section nav, a main column starting with PageHeader and followed by the actual page content, and a right PageAside wrapping a ContentToc for the "on this page" rail. The Selaras docs application uses this same arrangement, with a responsive drawer for the navigation on smaller screens.

<div class="flex">
  <SPageAside>
    <SContentNavigation :navigation="navigation" />
  </SPageAside>
  <main class="min-w-0 flex-1">
    <SPageHeader :title="page.title" :description="page.description" />
    <!-- page content -->
  </main>
  <SPageAside>
    <SContentToc :links="page.body.toc.links" />
  </SPageAside>
</div>

See also PageAside, ContentNavigation and ContentToc.

Custom :ui

To see exactly what you'd be overriding - the current default classes for every slot - here's PageHeader's own theme file:

Props

Slots