basic

Eyebrow + title + body

<tux-page-header eyebrow="primitives" title="TuxButton">
  Wraps <code>UButton</code>. The <code>intent</code> prop picks one of four
  TTI-conventional combinations so call sites don't juggle colors and classes.
</tux-page-header>

no subtitle

Just the heading

Omit the default slot for a bare eyebrow + heading — use when the page body starts immediately after.

<tux-page-header eyebrow="foundations" title="Tokens" />

nested

Level 2

<tux-page-header :level="2" eyebrow="inner section" title="Classification tiers">
  When the page already has an h1 elsewhere (e.g. inside a dashboard tile),
  use <code>:level="2"</code> to drop to h2 without changing visual weight.
</tux-page-header>

tone — neutral

Sunken-gray panel

Pass tone="neutral" for a softly distinct page header — useful when the page has rich body content and the header should read as separate from it.

tone — maroon · rhythm — hero

Marketing landing surface

Pass tone="maroon" + rhythm="hero" for the loudest possible opener — brand-colored panel, oversized heading, inverted text. Use sparingly; this is for the very top of a landing page, not interior chrome.

media slot

Two-column with quick fact

Pass content into the #media slot to anchor a column on the right (≥48rem). Common uses: a quick-fact callout, a hero image, or a TuxBigStat anchoring the headline number.