HPE Design System Templates

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

Common form use cases from application configuration to payment acceptance.

HPE Page Layouts Preview

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.

Content Layouts

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

HPE Filtering Preview

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

HPE Navigation Preview

The entry point for the expansive topic of Navigation.

HPE Wizard Preview

Wizards are an effective way to handle multi-step forms.

HPE Design System Global Header

A standardized header for use when building applications and services that live in the HPE ecosystem.

Global Banner Notifications

Global Banner Notifications are system generated alerts that attract user's attention to system conditions and updates.

console.log(
  "Hello World"
);

A standardized style for displaying code.

HPE Dashboards Preview

At-a-glance preview for operation critical information with easy access to areas requiring attention.

HPE Table Customization Preview

DataTable Customization

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

HPE Dashboards Preview

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

Matrix Navigation

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

Side-to-Side Navigation Preview

Side to Side Navigation

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

Ascending navigation diagram

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

Internationalization

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

HPE Lists Preview

Go-to patterns for displaying many services, devices, users, and more.

Scrolling and Pagination

When and how to apply techniques such as scrollable regions and pagination.

Status Indicator

Quickly provide peace-of-mind or call attention to items requiring a user's action.

HoorayYour toast is done!

Toast Notifications

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