docs / patterns / page-header
PageHeader
the block a view opens with. every part but the title is optional, so it degrades from a full dashboard hero all the way down to a plain headline.
intensity · structuresrsc · client
provenance
shaped from sisu-pluslayer
core / patternsintensity
structures · organizes a region, stays out of the contentcomposition
the first block of a view, above a DashboardGrid or a content columnthe aside takes a PageHeaderMetric or panel-variant stats, controls take ToggleChipGroupsone per view. a section inside the page gets a SectionHeadingthe control tray configures the header, it is not a filter bar for the pagea11y
stats pair label and value in adl · the closed control tray is inert · the scrim is aria-hiddenjest-axeeditablethe pencil toggles controlsOpen. the chips here add and remove stat tiles
Lut UniversitySummer 2026
Good afternoon, Mateusz.
- Grade avg.
- 4.1
- 4 graded
- Active courses
- 4
- Enrolled
- Credits left
- 104 cr
- To target
42%
Credit trajectory
metric and progress strip
Primary · 2024 curriculum
Software and Systems Engineering
2024 to 2028 · modified on 3 Jul 2026
76 / 193
credits earned · 39% of curriculum
104 cr to the degree minimumStudy right until 31 Jul 2028
compactthe aside is a second PageHeaderStats with panel tiles
Open
Summer to Spring 2025-2026
Open1 Jun 2025 to 31 May 2026
- Course registration
- 3
- Exam registration
- 0
- Processed
- 3
background slot
bring your own background.
a gradient, a canvas, a shader. anything you can render.
1
prop
props
| prop | type | default | notes |
|---|---|---|---|
| eyebrow | ReactNode | — | mono line above the title. a status word, a period, a breadcrumb. |
| title | ReactNode | — | the headline. |
| titleAccent | ReactNode | — | second phrase of the title, carrying the accent color. |
| accentColor | string | accent token | any CSS color. |
| headingLevel | "h1" | "h2" | "h3" | "h1" | the heading element the title renders as. |
| meta | ReactNode | — | line under the title. dates, counts, a status dot. |
| children | ReactNode | — | stat row under the meta line. pass PageHeaderStats. |
| aside | ReactNode | — | the right-hand column. a PageHeaderMetric, a panel row, a chart. |
| action | ReactNode | — | control pinned to the top right. usually an icon-only Button. |
| controls | ReactNode | — | revealed under the copy column while controlsOpen. pass ToggleChipGroups. |
| controlsOpen | boolean | false | whether the control tray is expanded. controlled. |
| progress | ReactNode | — | spans both columns, under them. a Progress, a ProgressRow, a segmented bar. |
| footer | ReactNode | — | small print along the bottom. |
| background | ReactNode | — | painted behind everything, under a scrim built from the surface token. no background, no scrim. |
| size | "default" | "compact" | "default" | compact shrinks the title and centers the two columns. |
props
| prop | type | default | notes |
|---|---|---|---|
| PageHeaderStats | dl | — | the stat row. wraps PageHeaderStat children. |
| PageHeaderStat | label, value, sub, tone, variant | — | variant: plain sits on the header, featured is the tinted lead tile, panel is a standalone card for the aside. |
| PageHeaderMetric | value, total, caption | — | the big number. total renders as value / total at roughly half the size. |
get it
bun add @usva-ui/reactusage
import { PageHeader, PageHeaderMetric, PageHeaderStat, PageHeaderStats } from "@usva-ui/react/patterns/page-header";
<PageHeader
eyebrow="Lut University · Summer 2026"
title="Good afternoon,"
titleAccent="Mateusz."
aside={<PageHeaderMetric value={76} total={193} caption="credits earned" />}
>
<PageHeaderStats>
<PageHeaderStat variant="featured" tone="accent" label="Grade avg." value="4.1" sub="4 graded" />
<PageHeaderStat label="Active courses" value="4" sub="Enrolled" />
</PageHeaderStats>
</PageHeader>