Surfaces
PageHeader
A page opening: what this page is, and what qualifies it.
Usage
When to reach for it
import { PageHeader } from '@misoto22/design'Notes
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.
Anatomy
| Element | Description |
|---|---|
| Headerrequired | A <header>, 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. |
| Titlerequired | 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.
Examples
default
The whole opening, in the order it is fixed in: trail, kicker, title, then the sentence under it. The range picker sits beside the title rather than above the content because it qualifies what the title refers to — it says which slice of the archive this page is about, and below the rule it would become a toolbar arguing with whatever strip the page starts with. The title is --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 — level={2} here only because this documentation page already owns the h1. The trail carries a label of its own for the same reason: two navigation landmarks with the same name are indistinguishable to anyone navigating by landmark, which is also why the guidance is to leave breadcrumb off inside a shell that pins a trail.
04
Money
Balances and flows across every account, as at the last sync.
a title and nothing else
Every slot but the title is optional, and an omitted one renders nothing at all rather than an empty box — four empty elements take the same vertical space as four full ones and read as a layout bug. This is the shape most routes inside an application frame actually want: the shell already pins a trail, so a second one here would be two answers to where am I. level={2} again, because the opening on a real page is the document's own h1 and this one is a preview inside a page that already has one.
Jobs
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 <header> is the page’s banner landmark, which is what a landmark-based reader jumps to first.