Page structure

Use <esp-page> to arrange a page's header, navigation, main content, and footer. It owns the outer structure so content components do not need to know where they sit on the page.

Choose a page kind

`kind`	Maximum width	Typical use
`wide` (default)	1536px	Dashboards and multi-column content
`narrow`	768px	Reading and forms
`full`	100%	Maps, canvases, and other full-width content
`site`	Full-width sections, shared 72rem content well	Sites with full-width bands

For kind="site", sections own their content wells. Read build a site for a complete example.

A page width cap and a text measure solve different problems. Use --esp-measure for reading columns within the page. See accessible reading.

Place content in slots

Slot	Content
`header`	Global navigation, usually `esp-header`
`sidebar`	Navigation in the left aside
`right`	Content in the right aside
Unnamed	Main page content
`preview`	Persistent preview pane
`flyout`	Transient help or flyout panel
`footer`	Footer content, usually `esp-footer`

<esp-page kind="narrow">
  <esp-header slot="header">
    <a slot="brand" href="/">My application</a>
  </esp-header>
  <main>
    <h1>Account settings</h1>
    <p>Update your profile and preferences.</p>
  </main>
  <esp-footer slot="footer"></esp-footer>
</esp-page>

The page reference documents the slots and workspace behavior in detail. Use page anatomy to choose the components for each region.

Align the surface and header

On wide viewports, align="start", "center", or "end" places the capped content surface within the remaining canvas. Header positioning can be normal, sticky, or fixed. See page alignment for canvas styling, header alignment, and examples.

Use CSS Grid for page regions that need alignment in two dimensions. Use Flexbox for rows and other alignment within a region.