HPE
Design System
Foundation
Components
Templates
Extend
Jump to section
Elements of an app UI
Page and PageContent
Page kinds
PageContent widths demonstration
Layouts for page content
Templates

Page Layouts

Choosing a layout is an important first step in designing a user interface. These guidelines will help create a consistent user experience across HPE applications and services.

Open in Figma

Elements of an app UI

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

App Container
Global Header
Page
PageContent
Global Footer
Diagram of the "building blocks" composing an application user interface: an App Container which contains the Global Header & 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.
  1. 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.
  1. 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.
  1. 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.
Coming soon:
  • Page Content Layout Templates for Dashboards, Wizards, Lists and Tables.
  • Updated guidance on Page Headers.

Page and PageContent

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.

Page
PageContent
Page Header
Other Content
Diagram of a Page component and child PageContent. The PageContent component contains the Page Header and other content.

Page kinds

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.

Wide (default)

  • 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.
App Container
Global Header
Page
PageContent
Page Header
Other Content
1536px
Global Footer
Diagram displaying how a "wide" Page scales its PageContent horizontally. The Page fills the viewport while the PageContent is restricted to a maximum width.

Use cases include:

  • Dashboards
  • Tables
  • Lists
  • Charts

Narrow

  • 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.
App Container
Global Header
Page
PageContent
Page Header
Other Content
768px
Global Footer
Diagram displaying how a "narrow" Page scales its PageContent horizontally. The Page fills the viewport while the PageContent is restricted to a maximum width.

Use cases include:

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

Full

  • 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.
App Container
Global Header
Page
PageContent
Page Header
Other Content
100%
Global Footer
Diagram displaying how a "full" Page scales horizontally. Both the "full" Page and PageContent fill the viewport.

Use cases may include:

  • Charts
  • Maps
  • Tables

Page padding

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.

48
48
Large viewport
24
24
Small viewport
A diagram showing the margin area on a larger and smaller screens.

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

Breakpoint
Pad (pixels)
xsmall
12
small
24
medium
24
large
48
xlarge
48

PageContent widths demonstration

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.

AppContainer
Global Header
Page
PageContent
Page Header
Other Content
Global Footer

Layouts for page content

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

See Content Layouts

Related

Related content you may find useful when using Page Layouts.

Content Layouts
Creating responsive, adaptable content layouts is central to the user experience.
HPE Navigation Preview
Navigation
The entry point for the expansive topic of Navigation.
HPE Dashboards Preview
Dashboards
At-a-glance preview for operation critical information with easy access to areas requiring attention.
HPE Design System Global Header
Global Header
A standardized header for use when building applications and services that live in the HPE ecosystem.
HPE
Text
Header
Header is a Box with a set of preset properties for introductory content.
© 2020 HPE
Terms
Privacy
Security
Footer
Footer is a Box with a set of preset properties. It is usually placed at the bottom of the page, which makes it predictable for users to find certain information or actions.

Still have questions?

Something missing or looking for more information? Get in touch to help make the HPE Design System better.

Edit this page