Layout

PageHeader

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

import { PageHeader } from '@lostgradient/cinder/page-header';
pageheadinglayout
01

Overview

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

Usage

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

<PageHeader title="Approvals" />
Live preview
02

When to use

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 — use hero-section.
03

Examples

Basic page header

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

04

Props

Props for page-header
Name Type Default Required Bindable Description
title string | Snippet req Page-level heading content. Rendered inside <h1>; snippets must emit phrasing content.
description string | Snippet 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).