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:
The when, how, and why to use 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 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.
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.
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 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.
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.
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.
Examples of common page layouts.
On both desktop and mobile, all content scrolls.
The border around page sections is for demonstration purposes only. Remove border in production.
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.
On both desktop and mobile, all content scrolls.
The border around page sections is for demonstration purposes only. Remove border in production.
