Page Header — cinder playground

Overview

Page-level heading with named title, description, breadcrumb, and action regions.

<script lang="ts">
  import PageHeader from '@lostgradient/cinder/page-header';
</script>

<PageHeader title="Approvals" />

Live preview

Use when

Rendering a route-level heading that needs consistent spacing and border treatment across pages.
Pairing page context and supporting copy with optional right-aligned controls.

Avoid when

Rendering section-scoped headings within page content — use section-heading.
Building complex hero layouts with rich copy and media — compose container (see its hero-section example).

Page-level heading with named title, description, breadcrumb, and action regions.

Props for page-header
Name	Type	Description
`title` required	`text`	Page-level heading content. Rendered inside `<h1>`; snippets must emit phrasing content.
`description`	`text`	Optional supporting content rendered below the title; snippets must emit phrasing content.
`breadcrumbs`	`snippet`	Optional breadcrumb navigation rendered above the heading row.
`actions`	`snippet`	Optional trailing actions (buttons, menus, controls).