HPE
Design System
Foundation
Components
Templates
Extend
Templates

Page Layouts

Page layout options, anatomies, and behaviors serving a wide variety of enterprise application, workflow, and marketing contexts.

Here are some common layouts to get you started:

Sidebar, header, and footer
Sidebar and header
Header and footer
Sticky Header
Header only

Guidance

The when, how, and why to use page layouts.

About Page Layouts

Choosing a page layout is an important first step in designing an application or website. Use of these layouts will help to maintain consistency across your design. They also provide visual guidance for how your design behaves at different screen sizes.

Common use cases include:

  • Creating a dashboard with global navigation
  • Providing a dialog for viewing or updating something
  • Displaying a page in a website

Components used within a Page Layout:

Page Layouts are built using the Header and Main components, with optional Sidebar and Footer components. For guidance on page layout content, refer to the HPE Design System website pages for the components that make up your Page Layout.

Usage

Page Layouts provide the basic structure for a variety of page types.

  • Page-level vertical scrolling is supported, but horizontal scrolling is not (and should be avoided, when possible).
  • Can be used with various Navigation patterns.
  • Are designed to be responsive, and thus behave well, regardless of the screen size they are displayed on.

Responsiveness

Examples are included for different screen sizes – Desktop, Laptop and Mobile.

Page content can expand to a max-width of 1440px and after that it stays centered. Specifically, the sidebar, main, footer, and header are constrained to stay centered, with equal margins on both sides. This behavior is demonstrated visually when a user clicks on a Desktop example.

Accessibility

The screen reader reads page content in the order it is specified. Refer to the code examples to see the order in which Page Layout components are specified. Since Sidebar is typically used for global navigation, it is always specified first in Page Layout, when it is included.

Specify page layout content so that it is understandable by the screen reader too. This should make the page easier to visually read as well.

Variants

Examples of common page layouts.

Sidebar, header, and footer

On desktop, the sidebar is fixed to the left side while header, main, and footer are a scrollable region. On mobile, the sidebar is fixed to the bottom of the screen.

The border around page sections is for demonstration purposes only. Remove border in production.

Sidebar
Header
Main
Footer
Open in Figma

Sidebar and header

On desktop, the sidebar is fixed to the left side while header and main are a scrollable region. On mobile, the sidebar is fixed to the bottom of the screen.

The border around page sections is for demonstration purposes only. Remove border in production.

Sidebar
Header
Main
Open in Figma

Header and footer

On both desktop and mobile, all content scrolls.

The border around page sections is for demonstration purposes only. Remove border in production.

Header
Main
Footer
Open in Figma

Sticky header

On both desktop and mobile, header is fixed to the top of the screen while main and footer are a scrollable region.

The border around page sections is for demonstration purposes only. Remove border in production.

Sidebar
Header
Main
Footer
Open in Figma

Header only

On both desktop and mobile, all content scrolls.

The border around page sections is for demonstration purposes only. Remove border in production.

Header
Main
Open in Figma

Related

Related content you may find useful when using Page Layouts.

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.
Grid
The Grid component is used to layout content. Responsive grid is important to consider in every use case.
HPE Lists Preview
Lists
Go-to patterns for displaying many services, devices, users, and more.
HPE Global Sidebar Preview
Global Sidebar
For use when building applications and services that live in the HPE eccosystem.
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. Box properties allow you to customize the footer.

Still have questions?

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

Edit this page
© 2021 Hewlett Packard Enterprise
Terms
Privacy
Security
Feedback