On this page
Overview
Show code, WithHeader.tsx
Variants
The header
The title can have a trail above it, a status or a count beside it and a sentence under it, with the page's actions at the end of its row.
Show code, WithBreadcrumbs.tsx
Search and filters
A row below the title holds search, filters and view switches.
- On a dense page, its buttons and the actions take the small control height.
Show code, WithToolbar.tsx
Widths
- Small
A form, a settings page or a sign-in page.
- Medium
A document, an article or the details of one item.
- Large
A dashboard, a list or a table. The default.
- Full
A board, a canvas or a wide table.
Without the gutter
A page can leave its sides to its content, such as a table that runs to the edges.
Anatomy
Page
Header
Content
Show code, PageAnatomy.tsx
Header
Breadcrumbs
Start
Title
Meta
Description
Actions
Toolbar
Show code, PageHeaderAnatomy.tsx
Behaviour
Sticky
A header can stay at the top of the area that scrolls, under a Scaffold's top bar.
- What takes focus in the page keeps clear of it.
Show code, Sticky.tsx
Adapting to width
The gutter at the page's sides is narrower in a compact region, such as on a phone or in a narrow pane of a wide window, and the header follows its own width.
- Where the header is narrow, the actions move under the title and wrap.
- The title wraps too and is never cut short.
- More actions than fit go in a Menu as the last one.
The muted fill shows the gutter.
Show code, Gutters.tsx
Rules
Page goes in a Scaffold's body, and its header sits at the top of the same column, so the title lines up with the content.
Use it when
- A readable width in a wide window, such as for a form or a document
- A page's title and the actions for the whole page, such as New projectPageHeader
- A trail, a status or a count beside the title, or search and filters under it
- A page heading that stays in view as the page scrolls
Width
One page per page, never the full width for text. A part that needs a narrower width takes it from its own content.
One heading
Give each page one header, whose title is the page's main heading.
- In a pane or a dialog, its heading sits a level lower.