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.
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
- 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.
- 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.
- Page
- 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 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 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.
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.
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.
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.
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.
Layouts for page content
For specific guidelines and templates regarding page content, see Content Layouts.
Still have questions?
Something missing or looking for more information? Get in touch to help make the HPE Design System better.