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 | string | — | Page title |
description | string | — | Supporting description |
breadcrumb | ReactNode | — | Breadcrumb slot |
actions | ReactNode | — | Action buttons slot |
className | string | — | Additional CSS class |
Design tokens
--cascivo-space-2--cascivo-space-4--cascivo-font-size-2xl--cascivo-font-weight-bold--cascivo-color-text--cascivo-color-text-muted--cascivo-font-size-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" />