PageHeader
Page-level header with title, description, breadcrumb, and actions slots.
Category: layout · WCAG 2.1-AA · layout, header, page
Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | ReactNode | — | Page title, rendered as the `<h1>`. Accepts nodes, not just a string, so you can put a status Badge or a linked domain beside the name — the canonical project-header shape. Keep it inline-level: it is an `<h1>`. |
description | ReactNode | — | Supporting line under the title, rendered as a `<p>`. Accepts nodes. |
breadcrumb | ReactNode | — | Breadcrumb slot |
actions | ReactNode | — | Action buttons slot |
className | string | — | Additional CSS class |
Design tokens
--cascivo-space-2--cascivo-space-4--cascivo-text-2xl--cascivo-font-bold--cascivo-color-text--cascivo-color-text-muted--cascivo-text-sm
When to use
- A page-level header with title, description, breadcrumb, and action slots
- Establishing consistent page tops across an application
When not to use
- A marketing hero with large media — use Hero
- A full app top bar with navigation — use AppShell
Examples
Basic
Title with description
<PageHeader title="Dashboard" description="Welcome back" />