# PageHeader A page opening: what this page is, and what qualifies it. - Group: Surfaces - Import: `import { PageHeader } from '@misoto22/folio'` - Page: https://ui.misoto22.com/components/page-header/ - Related: heading, breadcrumb, app-shell ## When to reach for it The top of a route’s own column. AppShell is the frame AROUND a page; this is the first thing inside one. ## Anatomy - **Header** (required) — A
, and therefore the page’s banner landmark. A column with a hairline under it and 24px of clearance below the rule — no top padding, so the shell decides where the page starts. - **Trail** — breadcrumb, above everything, as a rendered Breadcrumb rather than its items — the crumbs stay the caller’s to wire to a router. Left off inside a frame that already pins one. - **Eyebrow** — eyebrow in the mono kicker at --ink-3-aa, above the title and never below it. A page numeral, or the section the page belongs to. - **Title** (required) — title through Heading at --fs-heading, as an h1 unless level says otherwise. The size never follows the level: a page opening stands over a working screen rather than over a document whose subject is its own title, at every step of the outline. - **Actions** — actions, on the title’s baseline at the inline end. Controls that say which slice the title refers to — a range picker, a scope switch — not controls that act on the records. - **Description** — description under the title, capped at --measure-record so it stays a readable measure while the row above it runs the full width. ## Best practices ### Do - Put the range picker here rather than above the table. It qualifies the title — it says which slice of the archive the page is about — and below the rule it becomes a toolbar arguing with whatever strip the page starts with. - Leave breadcrumb off inside a shell that already pins a trail. Two trails on one screen are two answers to “where am I”, and a reader checks both. ### Don’t - Do not render two openings on one page at level 1. Each is an h1, so the second is a second document as far as heading navigation is concerned; a preview or a template inside a page that has its own h1 is what level is for. - Do not put a second finding in description. One sentence saying what the page is for; a number that changes belongs under the rule, beside the figures it is comparable with. ## Accessibility - The title is an h1 by default, so the page has a name in the heading list whatever the shell around it is doing, and level moves it where the opening is not the document’s. - The
is the page’s banner landmark, which is what a landmark-based reader jumps to first. ## PageHeader A page opening: what this page is, and what qualifies it. The system has `Heading` for a heading and `Breadcrumb` for a trail, and nothing that said how a page STARTS — so every application invented the arrangement, and the eyebrow landed above the title on one screen and below it on the next. This fixes the order, the rule under it, and where the controls sit. Distinct from `AppShell`, which is the frame around a page rather than the top of one: a shell holds the rail and the bar for every route, and this is the first thing inside the route's own column. The title renders as an `h1` unless `level` says otherwise, and it is worth saying why the default is the whole answer nearly always: a page has one name, and a shell that owns the document's heading has taken the page's own name away from it. A second opening on one screen is two pages. The SIZE is not a prop at all. `Heading` at level 1 defaults to `--fs-title`, which is the editorial step for a document whose subject IS its title; a page opening stands over a working screen, where the title is the label for what follows and the records under it are what the reader came for. `--fs-heading` is that step at every level, and `Heading` is what draws it, so the ladder stays one ladder and moving an opening down the outline never resizes it. ### Props - `title` (required) — `ReactNode`. What this page is. One line, and the only thing at this weight. - `eyebrow` — `ReactNode`. The kicker above the title. A wayfinding aid rather than decoration: in a console whose pages are referred to by a numeral, this is that numeral, and elsewhere it is the section the page belongs to. - `description` — `ReactNode`. One sentence saying what the page is for. Never a second finding. - `breadcrumb` — `ReactNode`. The trail above the opening, for a shell that does not already pin one. A page rendered inside an application frame usually leaves this off — two trails on one screen are two answers to "where am I". Takes the rendered `Breadcrumb` rather than its items, so the crumbs stay the caller's to wire to a router. - `actions` — `ReactNode`. Controls that qualify what the page IS, set inside the opening rather than above the content. The distinction is worth holding: a range picker does not act on the records, it says which slice of them the title refers to. Below the rule it becomes a toolbar competing with whatever strip follows; beside the title it reads as part of the heading, which is what it is. - `level` — `HeadingLevel` default `1`. The heading level `title` opens, in the document the opening lands in. Defaults to `1`, which is what a page opening IS: a page has one name, and a shell that owns the document's heading has taken the page's own name away from it. Move it only where the opening is not the document's — a preview canvas, a template shown inside a documentation page, a composition embedded under a host's own `h1`. The size does not follow the level. `title` renders at `--fs-heading` at every level, because moving an opening down the outline is a fact about the document and not a request for smaller type. - `className` — `string`. Also accepts: `Omit, 'title'>`. ## Example — default ```tsx import { Breadcrumb, Button, PageHeader } from '@misoto22/folio' } eyebrow="04" level={2} title="Money" description="Balances and flows across every account, as at the last sync." actions={ } /> ``` ## Example — a title and nothing else ```tsx export function Example() { return } ```