Page makes it easy to implement page layouts uniformly across HPE applications. Two components, Page and PageContent, work together to ensure HPE theme-defined padding, horizontal alignment, max-width, and responsive behaviors are applied in a consistent, turn-key manner.

Page is the outer layout component and provides the desired layout context. Page’s kind determines which theme-defined alignment, padding, and min/max-widths are applied to its PageContent children.

As a child of Page, PageContent consumes and adheres to the layout styling provided by its parent Page.

In most cases, all content on a page can be wrapped in a single PageContent component. However, designs using differing background colors to delineate page sections may accomplish this by applying a PageContent per desired section.

All content is placed within a single PageContent component.

Use cases where an application needs a background to span the entire width of a page section is achieved by setting background={{ fill: "horizontal", ...additional properties }} on PageContent.

This treatment is often seen on marketing sites where backgrounds help visually block content sections. This might also be seen in a context such as an app-store catalog where the hero section might have an image spanning.

"Wide" is Page's default kind. The vast majority of pages in HPE applications will likely use Page's "wide" variant.

See page layouts for specifications and content layouts for templates and guidance on responsive designs.

Narrow is for use cases where the desire is to provide a user with singular, focused content or objective, such as editing field values of an object or stepping through a wizard-based task flow. A "narrow" page layout limits the page content's width to large and positions the content at the center of the page.

See page layouts for specifications and use-case guidance.

"Full" is helpful in situations like presenting a monitoring dashboard filled with a collection of key performance indicators or an interface allowing a user to browse resources displayed on a geographic map. This option allows the page's content to occupy the entire width of the browser window. If the window's width exceeds the available content, the content is left aligned.

See page layouts for specifications and use-case guidance.