HPE Design System
HPE
Design System
Foundation
Components
Templates
Extend

HPE Design System

The Design System was created to empower designers, developers, and others to contribute to making great experiences for the customer.

HPE Designer Guidance Preview
Extend
Designer Guidance
Starter files, patterns, interactions, and workflows on how to succeed using the design resources from HPE Design System and the HPE Brand.
HPE Forms Preview
Templates
Forms
Common form use cases from application configuration to payment acceptance.
HPE
Text
Components
Header
Header is a Box with a set of preset properties for introductory content.
HPE Human Centered
Foundation
Human Centered
The starting point of the design system is human centered, generating experiences which are inclusive and vibrant.
HPE Developer Guidance Preview
Extend
Developer Guidance
Resources for setting up your application with the HPE Design System library and HPE theme.
Components
Button
Buttons are used to indicate actions that can be performed.
HPE Navigation Preview
Templates
Navigation
The entry point for the expansive topic of Navigation.
Hpe Icon Preview
Foundation
Icons
Icons are an integral part of our visual storytelling style to represent objects, actions, programs and other communicative symbols. This clean, dynamic style remains flexible while retaining the voice of our brand.
Components
Search
Find content corresponding to keyword queries.
HPE Typography Preview
Foundation
Typography
The MetricHPE font is an integral part of our personality and design. When we’re making a statement, our visual language is clear, recognized and understood.
HPE Accordion Preview
Components
Accordion
The accordion affords content to be delivered progressively.
The ship's
Anchor
.
Components
Anchor
Used with text based navigation, such as inline text.
Components
Box
Box is where it all starts. Flexible props allow the behavior of content to be defined to optimize the user experience.
HPE Cards Preview
Components
Card
A container providing at-a-glance information and easy access to more details.
Components
CheckBox
When the user needs to select one or more options, use a checkbox.
Components
CheckBoxGroup
When the user needs to select one or more options from a set of options, use a CheckBoxGroup.
Components
DateInput
A widget which allows the user to select a date or range of dates from a calendar.
© 2020 HPE
Terms
Privacy
Security
Components
Footer
Footer is a Box with a set of preset properties. Box properties allow you to customize the footer.
Components
Grid
The Grid component is used to layout content. Responsive grid is important to consider in every use case.
Components
Layer
The Layer component is flexible and can be used in multiple use cases such as modal, dialogs, or notifications.
Components
Main
The Main component is where you define the location and layout of the primary context of your content.
Components
MaskedInput
MaskedInput allows you to specify formailzed text within a form field.
Components
Menu
Menu contains a list of actions. When a menu item is clicked, the menu closes and the action is executed.
Components
RadioButtonGroup
When one option of a set of options can be specified, use the RadioButtonGroup component.
Components
RangeInput
The RangeInput component is a slider control that provides a handle the user can move to make changes to values.
Components
Select
Flexible input allowing users to choose from a list of options.
4
Components
Stack
A Stack component is a container that stacks content on top of each other.
HPE Tables Preview
Components
Table
Table presents data in a column and row format.
Components
Tabs
Tabs allow a user to access content while maintaining the existing context.
Components
TextArea
When you need to allow the user to provide longer forms of content, use a TextArea component.
Components
TextInput
The TextInput component allows the user to input shorter forms of data and content.
HPE Philosophy Preview
Foundation
Philosophy and Principles
What the HPE Design System is and why we’re creating it.
HPE Accessibility Preview
Foundation
Accessibility
Accessibility will be an important part of guidance in using our components.
HPE Our Brand Preview
Foundation
Our Brand
The Element is about focus. It creates momentum and energy. It is a building block. It can move, change, expand, and constrain. It works across many touch points.
HPE Color Preview
Foundation
Color
Bringing out the depth and dimension of our identity, the HPE Design System use of color evokes energy and inspiration.
HPE Background Colors Preview
Foundation
Background Colors Guidance
Leverage HPE background colors to seamlessly style your layout.
HPE Dashboards Preview
Templates
Dashboards
At-a-glance preview for operation critical information with easy access to areas requiring attention.
HPE Hub and Spoke Navigation Preview
Templates
Hub and Spoke Navigation
A navigation pattern promoting focused execution through a central "hub" from which all activities begin and "spokes" on which more focused tasks are accomplished.
HPE Lists Preview
Templates
Lists
Go-to patterns for displaying many services, devices, users, and more.
HPE Page Layouts Preview
Templates
Page Layouts
Page layout options, anatomies, and behaviors serving a wide variety of enterprise application, workflow, and marketing contexts.
HPE Peristent Navigation Preview
Templates
Persistent Navigation
Navigation choices which persist throughout the application structure, presenting consistent, easy to click-through choices.
HPE Wizard Preview
Templates
Wizard
Wizards are an effective way to handle multi-step forms.
HPE Data Visualization Preview
Templates
Data Visualization
Data visualizations are an effective way to present quantitative data to a user.
HPE Filtering Preview
Templates
Filtering
Allows users to create a focused data set by specifying data attributes and values of interest.
HPE Design System Global Header
Templates
Global Header
A standardized header for use when building applications and services that live in the HPE ecosystem.
HPE Notifications Preview
Templates
Notifications
Notifications are a helpful way to notify a user of changes to application state or to prompt action from a user.
HPE Designer Preview
Extend
Designer
Build HPE compliant designs in code that are ready to be consumed on the web.
HPE Design System Roadmap
Extend
Roadmap
An interactive roadmap of the HPE Design System that provides insight into current and future milestones.
HPE API Chomp Preview
Extend
API Chomp
Got API, but need to easily pull data out of it for use in your app or designs. Chomp! Chomp!
HPE Global Sidebar Preview
Extend
Global Sidebar
For use when building applications and services that live in the HPE eccosystem.
HPE Audience Preview
Extend
HPE Audience
Keep it simple! Present and share slides with this lightweight service.
HPE docs Preview
Extend
HPE Docs
The only CMS you will ever need! Publish content quickly and easily.
HPE Images Preview
Extend
HPE Images
Need a place to host images in the cloud for use by your HPE services and apps?
HPE React Router Preview
Extend
React Router
A collection of navigational components that compose declaratively with your application.
HPE Table Topper Preview
Extend
Table Topper
Build tables for your app quickly with all the filtering, sorting, and controls you could need!
© 2021 Hewlett Packard Enterprise
Terms
Privacy
Security
Feedback