Page Layouts

The User Interface (UI) for an HPE application consists of four building blocks: App Container, Global Header and Footer, Page, and PageContent.

1. App container

• The container serves as the outer shell of a page UI.
• This is the parent component containing all HTML elements within a grid.
• Its responsibility is to organize each of the page components, how they relate to eachother, the spacing between each, and how they respond at various screen widths.

2. Global header and footer

• The Global Header, also known as the HPE Common Header and Footer Web Service, provides a tunable, yet consistent header and footer to be used across all HPE applications.
• No matter the screen size, the Global Header & Footer will always be full width, occupying as much space as available.

3. Page

• The Page component dictates the max width, padding, and alignment of its child PageContent(s).
• It is responsible for the layout for the main content of a page.
• Page kind can be Wide, Narrow, of Full.

4. PageContent

• The PageContent contains the Page Header and any other content.
• Its max width, padding, and alignment is determined by what Page kind it is in.

• Page Content Layout Templates for Dashboards, Wizards, Lists and Tables.
• Updated guidance on Page Headers.

Page is the parent component that wraps around all content for a page. Page dictates what max width, padding, and alignment its child PageContent components should receive.

PageContent contains the Page Header and any other content.

To make the following functionality easy to implement, Grommet provides Page and PageContent components.

There are 3 Page kinds from which to choose, depending on the layout use case: Wide, Narrow and Full.

The Page kind determines the max width that PageContent can reach.

In all cases, the minimum width of content is 336px, after which horizontal scrolling is enabled.

• This is the default width for the PageContent.
• Using the "wide" Page scales the PageContent until a maximum width of 1536px.
• If the screen is larger than 1536px, the PageContent will be center aligned and white space will be displayed around the perimeter of the content.

Use cases include:

• Dashboards
• Tables
• Lists
• Charts

• The "narrow" Page scales the PageContent until a maximum width of 768px.
• If the screen is wider than 768px, the PageContent will be center aligned and white space will be displayed around the perimeter of the content.

Use cases include:

• Wizards
• Articles
• Single task flows, such as forms
• Admin and user settings

• The "full" Page will automatically resize the PageContent to fill the screen displaying it.
• With the "full" option, if the screen grows wider than the available content, the PageContent will be left aligned to the edge of the screen.

Use cases may include:

• Charts
• Maps
• Tables

Page padding is the left and right space between the page content and the screen edge.

Wider padding is better for larger screens, as it creates more whitespace either side of the content. For smaller screens, less whitespace is appropriate in order to maximize the available screen real estate.

Responsive breakpoints determine the amount of horizontal padding to be used at various screen widths.

Open the following example in "fullscreen mode" and resize your browser window to see how each page content width's maximum width, contents padding, and alignment gracefully adjust across screens ranging from very narrow to very wide.

For specific guidelines and templates regarding page content, see Content Layouts.