Highlights

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

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.

Templates

Forms

Common form use cases from application configuration to payment acceptance.

Header is a Box with a set of preset properties for introductory content.

Foundation

Human Centered

The starting point of the design system is human centered, generating experiences which are inclusive and vibrant.

Foundation

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.

Templates

Navigation

The entry point for the expansive topic of Navigation.

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

Find content corresponding to keyword queries.

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.

Components

Accordion

The accordion affords content to be delivered progressively.

Components

All Components

Grommet components are the building blocks of the HPE Design System.

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.

Components

Card

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

Value

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

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.

Components

FileInput

An input used to upload one or more files.

Components

Footer

Footer is a Box with a set of preset properties. Box properties allow you to customize the footer.

Components

Grid

A layout's best friend. From scaffolding page layouts, to organizing elements within a Card, Grid is a powerful tool for composing responsive, adaptive layouts.

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 formalized text within a form field.

Components

Menu contains a list of actions. When a menu item is clicked, 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.

Components

Notification

Notifications deliver transparent clarity for task and system statuses.

Components

Page

A helpful container providing consistent page layouts across all HPE applications.

Components

PageHeader

A component providing users a consistent, predictable layout for locating a page's title, contextual navigation, and actions across all HPE applications.

Components

Pagination

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

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.

Components

SelectMultiple

Enables the user to quickly scan through a dropdown list of options and select multiple choices.

Components

Spinner

A loading state for quick asynchronous tasks.

Components

Stack

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

Components

Tabs

Tabs allow a user to access content while maintaining the existing context.

Name : Value

Components

Tag

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

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.

Components

Tip

A Tip is used to specify extra information when the user moves the mouse pointer over the element.

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

Foundation

Philosophy and Principles

What the HPE Design System is and why we’re creating it.

Foundation

T-shirt Sizing

Create consistent, composable interfaces with t-shirt sizing.

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.

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

Color

Bringing out the depth and dimension of our identity, the HPE Design System use of color evokes energy and inspiration.

Foundation

Background Colors Guidance

Leverage HPE background colors to seamlessly style your layout.

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.

Templates

Filtering

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

Templates

Wizard

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

Templates

Global Header

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

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.

Templates

Dashboards

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

Templates

DataTable Customization

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

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.

Templates

Matrix Navigation

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

Templates

Side to Side Navigation

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

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.

Templates

Internationalization

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

Templates

Lists

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

Templates

Scrolling and Pagination

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

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.

Extend

Roadmap

An interactive roadmap of the HPE Design System that provides insight into current and future milestones.