HPE Design System

Components

The component library provides a vetted set of interface elements for use in your applications and websites. All components are published in Figma for use in your designs. Web versions are built atop Grommet and styled by the HPE Theme providing the "building blocks" your application needs to be performant and compliant.

Layouts

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

Card

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

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.

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.

Header

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

Layer

Layer is a component allowing content to be displayed on top of the page the user is currently on.

Main

The Main component is where you define the location and layout of the primary context of your content.

HPE Page Preview

Page

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

HPE PageHeader Preview

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.

Stack

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

Controls

HPE Accordion Preview

Accordion

The accordion is a list with expanded and collapsed states. When clicked opened, it reveals more detail.

Anchor

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

Button

Buttons are graphic elements that indicate to users that actions can be performed.

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.

HPE Design System Pagination

Pagination

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

Search

Search is a field that allows a user to input keywords for content they are looking for.

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.

HPE Tip preview

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.

Inputs

CheckBox

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

CheckBoxGroup

CheckBoxGroup is a component that presents related checkbox options.

DateInput

A widget which allows the user to select a date or range of dates from a calendar.

HPE Design System FileInput

FileInput

An input field where a user can select and upload one or more files.

MaskedInput

MaskedInput allows you to specify formatted text within a form field.

RadioButtonGroup

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

RangeInput

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

Select

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

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.

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.

TextInput

TextInput is a field used in forms to capture short entries.

Visualizations

Avatar

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

HPE Tables Preview

DataTable

DataTable presents data in a column and row format.

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.

NameValueList

A NameValueList displays a group of NameValuePairs.

Notification

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

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.

Spinner

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

Tag

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

All Components

View additional Grommet components which haven't been presented above. Some, like DataChart and Video have not yet been customized by the HPE Design System. Others, like Image, Keyboard, and ResponsiveContext provide tremendous utility, but may not require specific HPE styling or guidance.

Purple playing cards representing HPE Design System components

All Components

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