HPE Design System Templates
HPE
Design System
Foundation
Components
Templates
Extend

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
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.
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.
Internationalization
Templates
Internationalization
How to internationalize a site or application that uses the HPE Design System.
HPE Lists Preview
Templates
Lists
Go-to patterns for displaying many services, devices, users, and more.
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.
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.
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.
HoorayYour 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.