Skip To:

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

Forms

Common form use cases from application configuration to payment acceptance.

HPE Page Layouts Preview

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.

Content layouts

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

HPE Filtering Preview

Filtering

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

Selector

A selection control that allows users to choose one or more related options to access information, filter, and make selections.

This is a popover

Popover

A Popover is an overlay presenting contextual information related to a specific UI element.

HPE Wizard Preview

Wizard

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

HPE Navigation Preview

Navigation

The entry point for the expansive topic of Navigation.

HPE Design System Global Header

Global header

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

Empty state title

Empty state message will be displayed here.

Empty state

An empty state refers to when the UI is devoid of any data or information.

Global notifications

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

console.log(
  "Hello World"
);

Code blocks

A standardized style for displaying code.

HPE Dashboards Preview

Dashboards

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

Lists

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

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.

Nearing your allotted budget.

Inline notifications

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

Internationalization

Internationalization

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

HPE Forms Preview

Managing child objects

How to show, hide, and edit details of child objects related to a parent within a form context.

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.

Your toast is done!

Toast notifications

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

User feedback collection

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

wiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwiwi