HPE
Design System
Foundation
Components
Templates
Extend
Jump to section
Responsive design
Breakpoints
Prioritizing content needs
Implementing content layouts
Container-driven layouts
Content-driven layouts
Nested grids
Templates
Templates

Content Layouts

Creating responsive, adaptable content layouts is central to the user experience.

Content layouts may be applied across different levels of information hierarchy. At a page template level, it can help with the layout of page sections. At an page section level, it can coordinate how a title, piece of content, and related actions should be laid out in relation to each other.

Understanding Grid is the key to creating successful content layouts.

Looking for a quick start? Jump to layout templates.

Responsive design

Layouts should be adaptable to different screen sizes. Our goal as designers and developers at HPE should be to create optimal and accessible user experiences regardless of screen size or resolution.

Breakpoints

A breakpoint is a point at which some change in the page design is likely to occur.

For designers, breakpoints can help stress test and validate UX decisions around page layouts.

See the table below for breakpoints defined by the HPE Design System. Keep in mind that these breakpoints are not meant to target every single existing device — we understand that technology is ever evolving. Instead, the ranges defined here help build a strong foundation to account for diverse use cases when creating responsive designs.

Breakpoint
Range (width in pixels)
xsmall
576 and below
small
577 - 768
medium
769 - 1080
large
1081 - 1439
xlarge
1440 and above

Prioritizing content needs

Focusing on content needs allows for optimal user experiences to be created. Thinking about which pieces of content a user will likely need and want to interact with first informs how the items on the page should be ordered.

Specifying layout content in this way will also ensure that it is interepreted appropriately by screen readers for visually impaired users.

The example below has content labeled by its priority. Resize your browser window and notice the content layout adjust, ensuring content is ordered as desired across window widths.

Global Header

Dashboard @ 'xsmall' Breakpoint

1
2
3
4
5
6
Global Footer

Implementing content layouts

The following discusses three approaches for building responsive content layouts. All approaches may be mixed and matched as desired.

  • Container-driven
  • Content-driven
  • Nested grids

These approaches take full advantage of Grid's flexibility which provides designers and developers great control and ability to execute layouts regardless of the user's screen size. For greater detail about Grid's properties and key concepts visit getting to know Grid.

Additionally, a can't miss tool for designers is Layout Templates in Figma which provides Grid-based layout templates for each responsive breakpoint and page layout kind.

Container-driven layouts

Container-driven layouts drive the layout from the outside-in. They begin by defining regions in which the content will live, whether those regions are fixed, flexible, or fluid, and how those regions are prioritized at each responsive breakpoint.

Container-driven layouts are useful for defining larger layouts, such as at the page level, but can be useful for defining smaller sub-regions as well. The best use of available screen real-estate can be achieved by combining a container-driven page layout with components such as Cards which have been built to have adaptive layouts themselves.

The following example takes a container-driven approach, implementing an app-catalog consisting of a filters region and a results region.

Key aspects to the approach are:

  • At larger breakpoints, the content layout will be a two-column layout; a single column at smaller breakpoints.
  • The filters region will be fixed-width when in a two-column layout and flex-width when in a single column. The results region always uses a fluid grid.
  • The filters region are prioritized over the results region because the filters are needed to control the results.

App Catalog

Browse, search, and discover all the wonderful apps we have for you.

Apps

Content-driven layouts

Content-driven layouts are driven from the inside-out, allowing the container to respond and adapt to things like user entered content, like names. The layout is custom fit to the content it holds.

The content-driven approach is useful for layouts such as modal dialogs or side drawer content within a layer, where the content should occupy the space it needs and not be awkwardly constrained by its layout container.

The following example takes a content-driven approach, implementing a modal dialog displaying content returned from a server with an unknown length.

Nested grids

When dealing with complex layouts, it is helpful to simplify them by thinking of them as nested grids. Any column or grid area may be a grid itself.

Parent Grid
Nested Grid A
Nested Grid B
Diagram illustrating how Grids may be nested inside one another.

Templates

Responsive, customizable layout templates to help you jumpstart your application design and development. This work is in progress. More templates coming soon.

Boxes of mixed-sizes representing dashboard content, 
        presented in two columns.
2 Column - Dashboard
Dashboard content represented by equal-sized boxes 
        organized in a three column by two row grid.
3 Column - Dashboard
"Coming Soon" text next to a clock icon.
Single Column - Wizard
"Coming Soon" text next to a clock icon.
2 Column - Wizard
"Coming Soon" text next to a clock icon.
Multi-column - Dashboard
"Coming Soon" text next to a clock icon.
Single Column - Chart + Table
"Coming Soon" text next to a clock icon.
2 Column - Table + NameValueList

Related

Related content you may find useful when using Content Layouts.

HPE Page Layouts Preview
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.
Components
Grid
Grid is a component based on columns and rows used for organizing layouts. From scaffolding page layouts, to organizing elements within a Card, Grid is a powerful tool for composing responsive, adaptive layouts.

Still have questions?

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

Edit this page