HPE Design System Templates
HPE
Design System
Foundation
Components
Templates
Learn

Templates

Jumpstart application design and development with use-case specific templates. Interactive templates demonstrate desired user experiences and the building block components used to create them.

HPE Forms Preview
Templates

Forms

Common form use cases from application configuration to payment acceptance.
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.
Templates

Content Layouts

Creating responsive, adaptable content layouts is central to the user experience.
HPE Filtering Preview
Templates

Filtering

Allows users to create a focused data set by specifying data attributes and values of interest.
HPE Navigation Preview
Templates

Navigation

The entry point for the expansive topic of Navigation.
HPE Wizard Preview
Templates

Wizard

Wizards are an effective way to handle multi-step forms.
HPE Design System Global Header
Templates

Global Header

A standardized header for use when building applications and services that live in the HPE ecosystem.
Banner notification under HPE Global Application header.
Templates

Empty State

An empty state refers to when the UI is devoid of any data or information.
Banner notification under HPE Global Application header.
Templates

Global Banner Notifications

Global Banner Notifications are system generated alerts that attract user's attention to system conditions and updates.
console.log(
  "Hello World"
);
Templates

Code Blocks

A standardized style for displaying code.
HPE Dashboards Preview
Templates

Dashboards

At-a-glance preview for operation critical information with easy access to areas requiring attention.
HPE Table Customization Preview
Templates

DataTable Customization

Allows users to customize which columns are visible in a data table and in what order they appear.
HPE Dashboards Preview
Templates

Drill Down Navigation

Allows users to progressively descend 'down' branches of a hierarchical tree into a child screen to drill down into more granular details.
HPE Lists Preview
Templates

Lists

Go-to patterns for displaying many services, devices, users, and more.
HPE Lists Preview
Templates

Matrix Navigation

Matrix Navigation is not a path that you can define for the user, rather the user defines it themselves.
Templates

Scrolling and Pagination

When and how to apply techniques such as scrollable regions and pagination.
Ascending navigation diagram
Templates

Ascending Navigation

The Ascending Button for Navigation allows the user to navigate to a parent page from a child page by moving upward in the application or website hierarchy.

Nearing your allotted budget.

Templates

Inline Notifications

Inline notifications help application users by delivering timely, contextual information and feedback related to their actions.
Internationalization
Templates

Internationalization

How to internationalize a site or application that uses the HPE Design System.
HPE Forms Preview
Templates

Managing Child Objects

How to show, hide, and edit details of child objects related to a parent within a form context.
Side-to-Side Navigation Preview
Templates

Side to Side Navigation

Allows users to access sibling screens sequentially from the same level of the hierarchy.
Templates

Status Indicator

Quickly provide peace-of-mind or call attention to items requiring a user's action.
Hooray. Your toast is done!
Templates

Toast Notifications

Toast notifications are used to communicate low severity level information to users in an unobtrusive way.
Templates

User Feedback Collection

Improve customer experiences and make impactful, data-driven decisions by collecting feedback directly from users.