Page

Page holds the page's content as children, and its heading, a PageHeader, in header, at the top of the same column.

• Put it in a Scaffold's body, which is already the main landmark: add none around a Page.

Width and gutter

• width is sm, 40 rem, md, 60 rem, lg, 76 rem and the default, or full.
• gutter pads the column's inline edges with the page gutter, 1 rem in a compact region and 1.5 rem from medium, by the window class of the region the page sits in, so a page in a narrow pane of a wide window keeps the compact gutter.
• gutter={false} leaves them to the content, such as a full-bleed table.

<Page width="sm" header={<PageHeader title="Settings" />}>
  …
</Page>
<Page width="full" gutter={false}>
  …
</Page>

Element and name

render sets the element, a div by default, such as render={<article />} for a document. name names the node for dev mode, as data-env-name.

The header

A PageHeader takes the page's title, which wraps, balanced across its lines, and is never cut short.

• description goes under it, in the smaller muted text.
• breadcrumbs go above it, usually Breadcrumbs with wrap={false}.
• start goes before it, such as an Avatar, an icon or a back IconButton.
• meta goes beside it, such as Badges or a count.
• The page's actions go at the end of the title row, the primary action last.
• The page's title and actions go here, not in the top bar, which belongs to the frame.

<PageHeader
  title="Northwind launch"
  description="Press kit, venue and invitations for the spring launch."
  breadcrumbs={<Breadcrumbs wrap={false} items={trail} />}
  meta={<Badge tone="success">On track</Badge>}
  actions={
    <>
      <Button variant="secondary" startIcon={<IconShare />}>
        Share
      </Button>
      <Button>New task</Button>
    </>
  }
/>

Heading level

The title is an h1 by default. Set headingLevel lower for a header inside a pane, a dialog or a section under another heading; it looks the same at every level.

Toolbar

toolbar adds a second row under the title for search, filters and view switches, laid out with <Row wrap justify="between">.

• A row that holds a text field is a Row, not a Toolbar, so the field keeps its arrow keys.
• controlSize is md, the default, or sm for a dense page, such as one in a small window: it sizes the buttons and icon buttons in actions and toolbar that set none.
• Give fields in the toolbar the same size.

<PageHeader
  title="People"
  controlSize="sm"
  actions={<Button startIcon={<IconAdd />}>Invite</Button>}
  toolbar={
    <Row wrap align="center" justify="between" gap={3}>
      <SearchField label="Search people" size="sm" />
      <SegmentedControl
        aria-label="View"
        size="sm"
        value={view}
        onValueChange={setView}
        items={views}
      />
    </Row>
  }
/>

Sticky

sticky keeps the header in view at the top of the area that scrolls, over the content under it: under a Scaffold's top bar where the document scrolls, or at the top of a Scaffold's body that scrolls.

• As a Page's header, what scrolls into view below it, such as a field taking focus, keeps clear of it.
• The header measures its height, which CSS reckons from its rows until script runs.

<Page
  header={
    <PageHeader
      sticky
      title="Annual report"
      actions={<Button variant="secondary">Download</Button>}
    />
  }
>
  …
</Page>

The page, env-page, holds its header and its content, env-page-content, at its width.

• It never paints, and it is the env-page size container for the content inside.
• data-width carries a width other than lg, and data-gutter="none" a page without the gutter.

The header is a div, no landmark, env-page-header, with the breadcrumbs, env-page-header-breadcrumbs, the start, env-page-header-start, the title, env-page-header-title, the meta, env-page-header-meta, the description, env-page-header-description, the actions, env-page-header-actions, and the toolbar, env-page-header-toolbar.

• It responds to its own width: below 37.5 rem the actions move under the title and wrap.
• Put more actions than fit in a Menu as the last one.