HPE Design System
HPE
Design System
Foundation
Components
Templates
Learn

Highlights

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

HPE Designer Guidance Preview
Foundation

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
Foundation

Developer Guidance

Resources for setting up your application with the HPE Design System library and HPE theme.
Components

Button

Buttons are graphic elements that indicate to users that actions 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

Search is a field that allows a user to input keywords for content they are looking for.
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 is a list with expanded and collapsed states. When clicked opened, it reveals more detail.
Purple playing cards representing HPE Design System components
Components

All Components

Grommet components are the building blocks of the HPE Design System.
The ship's
Anchor
.
Components

Anchor

Hyperlinks used with text-based navigation, such as inline text.
Components

Avatar

An Avatar displays an image, logo, or initials to help users efficiently identify a person, company, or entity.
Components

Box

Boxes are containers that drive the layout of your content. Flexible props allow the behavior of content to be defined to optimize the user experience.
HPE Cards Preview
Components

Call to action card

A call to action card should be used to entice the user down a desired path.
HPE Cards Preview
Components

Card

A container providing at-a-glance information and easy access to more details.
Components

Center Layer

A center layer should be used for brief, concise confirmations or dialogs.
Components

CheckBox

CheckBox is a square design element that when clicked accepts the choice offered.
Components

CheckBoxGroup

CheckBoxGroup is a component that presents related checkbox options.
HPE Tables Preview
Components

DataTable

DataTable presents data in a column and row format.
Components

DateInput

A widget which allows the user to select a date or range of dates from a calendar.
HPE Design System FileInput
Components

FileInput

An input field where a user can select and upload one or more files.
© 2020 HPE
Terms
Privacy
Security
Components

Footer

Footer is a Box with a set of preset properties. It is usually placed at the bottom of the page, which makes it predictable for users to find certain information or actions.
Components

Fullscreen Layer

Fullscreen layers should be used for large or longer layer content.
Components

Grid

Grid is a component based on columns and rows used for organizing layouts. From scaffolding page layouts, to organizing elements within a Card, Grid is a powerful tool for composing responsive, adaptive layouts.
Components

Layer

Layer is a component allowing content to be displayed on top of the page the user is currently on.
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 formatted text within a form field.
Components

Menu

Menu is a component that contains a list of actions. When a user clicks an item in the menu, the menu closes and the action is executed.
Created On
13/02/2021 at 14:23:32
Description
Privilege escalation, via set-user-ID or set-group-ID file mode, should not be allowed.
Components

NameValueList

A NameValueList displays a group of NameValuePairs.
HPE Cards Preview
Components

Navigational card

Navigational cards provide the user with a means of wayfinding.
Image featuring a bell icon and indicator representing how a timely notification might be presented to a user within an application.
Components

Notification

Notifications deliver clarity for information related to tasks or system statuses that the user should be made aware of.
HPE Page Preview
Components

Page

Page is a helpful container providing consistent layouts across all HPE applications.
HPE PageHeader Preview
Components

PageHeader

A component providing users a consistent, predictable layout and location for the page title, contextual navigation, and actions across all HPE applications. PageHeader is placed at the top of the page.
HPE Design System Pagination
Components

Pagination

Pagination divides content into separate pages in order to enhance navigation to specific items.
Components

RadioButtonGroup

RadioButtonGroup is a component that offers related options to a user, but only allows them to choose one.
Components

RangeInput

The RangeInput component is a slider control that provides a handle the user can move along a continuum to select a value.
Components

Select

Select is a flexible input field that allows users to choose from a list of options.
Components

SelectMultiple

SelectMultiple is a dropdown component that enables the user to quickly scan the list of options and choose more than one of the options.
Components

Side Drawer Layer

When you want to enable a user to maintain the context of their current page, side drawer layers may be used for quickly viewing an object's detail, configuring an object, or applying filter choices.
Components

Skeleton

Skeletons act as placeholder previews for UI elements so that users are provided with a structure of a loading page. This helps users to anticipate where and what types of content are loading.
HPE Spinner preview
Components

Spinner

Spinner is a small motion graphic element that indicates a loading state for quick, asynchronous tasks.
4
Components

Stack

A Stack component is a container that stacks content on top of each other.
Components

Tabs

Tabs are graphical elements usually arranged like column headings. They allow a user to access various sets of content without leaving their current page.
Name : Value
Components

Tag

Tags are metadata attributes facilitating the identification, organization, searching, and filtering of resources.
Components

TextArea

TextArea is a field used in forms to capture longer text. This component provides the user with space to type more characters than the TextInput field.
Components

TextInput

TextInput is a field used in forms to capture short entries.
HPE Tip preview
Components

Tip

A Tip is a small layer that opens when the user moves the mouse pointer over an element. The intention is to offer helpful information in the immediate context.
HPE Accessibility Preview
Foundation

Accessibility

Central to the HPE Design System, accessibility is incorporated into all Design System facets, ensuring HPE applications are usable by as many people as possible.
Foundation

Accessibility Transcript File

Transcription for Accessibility at HPE with Bill Tipton
HPE Philosophy Preview
Foundation

Philosophy and Principles

What the HPE Design System is and why we’re creating it.
HPE T-shirt Sizing Preview
Foundation

T-shirt Sizing

Create consistent, composable interfaces with t-shirt sizing.
HPE Voice and Tone Preview with two speech bubbles
Foundation

Voice and Tone

Deliver clear, consistent experiences to HPE customers by following guidelines for the voice and tone of text-based user interface elements.
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.
Foundation

Distinctive Brand Assets

Our distinctive brand assets are comprised of the top elements that are always used, along with several optional components that can be added.
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.
Learn

The Box Model: Part One

Build a hero section to learn about fundamental Box properties.
Learn

Grid Fundamentals: Part One

Use Grid to display a collection of products, similar to that of an e-commerce website.
Learn

How to add search and filter to DataTable with Data

This how-to guide shows you how to use the Data component to easily add searching and filtering to a DataTable.
HPE T-shirt Sizing Preview
Learn

T-shirt sizing

Understand the motivations behind behind t-shirt sizing and how it drives consistent experiences.
Learn

Grommet API Docs

Documentation on availability properties and property types for Grommet components.
HPE Design System Roadmap
Learn

Roadmap

An interactive roadmap of the HPE Design System that provides insight into current and future milestones.
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 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.