Components Page header

Page header

Detail-page header chrome — large title on the left, action buttons on the right, with a sticky bar that slides in when the title scrolls out of view. Owns the <koala-page-title> rendering and the IntersectionObserver lifecycle for the sticky bar.

<koala-page-header>

Canonical

Quotes

New quote

Quotes

Detail content sits below the header. Scroll the page to see the sticky bar pin once the title leaves the viewport.

<koala-page-header title="Quotes">
    <a href="/quotes/new" koala-btn="Primary">New quote</a>
</koala-page-header>

Default page-title styling is Plus Jakarta Sans, 28px / 34px, bold, with slight tightening. Action buttons are passed as child content.

Variants

3 variants

Plain title

Branches

Add branch

Branches

Editorial variant

No quotes yet.

Used inside hero empty-state pages. The <em> picks up italic styling and brand plum.

<koala-page-title variant="Editorial">No quotes <em>yet.</em></koala-page-title>

Custom title content (with status badge)

KQ-20260331-001

Accepted

Re-quote

KQ-20260331-001

<koala-page-header title="KQ-20260331-001"
                   title-content='<h2 class="text-[28px] leading-[34px] tracking-[-0.015em] font-bold text-on-surface">KQ-20260331-001</h2><span koala-badge="Success" koala-badge-size="Small">Accepted</span>'>
    <a href="#" koala-btn="Secondary">Re-quote</a>
</koala-page-header>

Props

5 attributes

Attribute	Values	Notes
title	string	Required. Rendered via the default `<koala-page-title>` shape.
title-content	string? (raw HTML)	Overrides the title side of the title row. Use when the title needs siblings (badges, version picker).
sticky-content	string? (raw HTML)	Overrides the sticky-bar title side. Defaults to the plain title text in a smaller heading.
repeat-actions-in-sticky	bool	Repeat the child action buttons inside the sticky bar (desktop only). Defaults to false.
class	string?	Extra classes on the outer wrapper.

Page title

Standalone heading helper. Rendered automatically by <koala-page-header>; use directly when you need the title without the surrounding action row (hero empty states, error pages). The Editorial variant increases the title scale while staying in Plus Jakarta Sans; italic <em> picks up the brand plum.

<koala-page-title>

Quotes

Default

No quotes yet.

variant="Editorial"