Theme

Page header

The head of a page or a record: its title, status, description, actions and tabs.

Examples

A record: status, description, actions and tabs

Verification gaps

Judging

Where a model's claims outrun the evidence its sources give.

Overview

Runs

What the concept claims.

A title and a description, then the page's body

Deadlines

Every venue's next date, in your time zone.

The page's content, inset to line up with the header.

Props

`PageHeader`

The head of a page or a record: its title, what it is, its views and its actions.

Prop	Type	Default	Description
`title`	`string`	—
`description?`	`ReactNode`	—	One or two sentences under the title.
`meta?`	`ReactNode`	—	Beside the title: status Tags or a Badge.
`actions?`	`ReactNode`	—	Buttons for the page's subject, at the end of the title row.
`tabs?`	`ReactNode`	—	The views of the page: a TabList inside the Tabs that also hold the panels, or links styled as tabs. It sits on the header's bottom edge.
`level?`	`2 \| 1`	`1`	The title's heading level: 1 for the page's own header, 2 for one shown inside another page.

`PageBody`

A page's content under its TopBar and PageHeader, inset to line up with them. Every page in the shell holds its content in one, so no app chooses its own page padding.

Prop	Type	Default	Description
`width?`	`"page" \| "full"`	`"full"`	full for tables and lists that use the width; page to hold a page of text and forms to layout.page.
`children`	`ReactNode`	—

Accessibility

The title is the page's h1, or an h2 when the header is shown inside another page.
Tabs passed in keep React Aria's keyboard behaviour; put the Tabs around the header and the panels.
PageBody holds the content below it, inset to line up with the top bar and the header, so no app chooses its own page padding.