Page

<esp-page>

Used to lay out standard page structure.

Slots

<esp-page> has the following slots:

header

Global navigation content (typically an esp-header).

sidebar

Contextual navigation placed in the left aside.

right

Content to place in the right aside.

footer

Content to place in the footer.

Default

The main page content. The main content region applies contain: inline-size so child components cannot push the content well wider than its grid column. In narrow mode, slotted children are constrained to max-inline-size: 66ch for optimal reading measure.

Attributes

<esp-page> has the following attributes:

kind

kind has a default value of "wide".

The layout mode of the page.

wide (default) — constrains the main content well to 1536px. Optimized for high-density dashboards and complex data grids.
narrow — constrains the main content well to 768px and applies a max-inline-size: 66ch reading measure. Optimized for long-form reading content.
full — no max-width constraint; the content well spans the full available space. Optimized for immersive canvases like maps or design tools.

fixed-menus

fixed-menus has a default value of false.

Scroll the main content instead of the whole page. This creates a fixed-menu effect. To see it in action, use the "pinned" button on the header of this page.

Methods

<esp-page> has the following methods:

AddDialog

Inject an element into a div with the highest z-index so dialogs are rendered on top of everything else.

traverseToClosest

Traverse up the DOM tree to find the closest element that matches the selector. This method is aware of shadow DOM boundaries and will traverse through them to find the element.

CSS Parts

<esp-page> has a CSS part:

wrapper

The page wrapper. It defaults to a grid with a height of 100vh. For the demo page, the height is set to 400px by styling the CSS part:

CSS Properties

<esp-page> has the following CSS properties:

--esp-page-background

The background color of the page.

--esp-page-max-width

The maximum width of the main content well. Set automatically by the kind attribute: 1536px (wide), 768px (narrow), or none (full).

--esp-header-height

The height of the header.

--esp-page-background-image

The background image to display behind page content.

--esp-page-background-image-opacity

The opacity of the background image layer.

--esp-field-background

Background color of the shared field shell. Defaults to var(--esp-color-layer-2).

--esp-field-border-color

Border color of the shared field shell. Defaults to var(--esp-color-border).

--esp-field-border-width

Border width of the shared field shell. Defaults to 1px.

--esp-field-text-color

Text color used inside the shared field shell. Defaults to var(--esp-color-text).

--esp-field-hover-bg

Hover background color of the shared field shell. Derived from --esp-field-background.

--esp-field-focus-bg

Focus background color of the shared field shell. Derived from --esp-field-background.

--esp-field-focus-shadow

Shadow color used for shared field focus treatment. Defaults to var(--esp-color-shadow).