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

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

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

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 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 is a Box with a set of preset properties for introductory content.

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

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

HPE Page Preview

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

HPE PageHeader Preview

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.

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

Controls

HPE Accordion Preview

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

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

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

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 divides content into separate pages in order to enhance navigation to specific items.

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

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

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 is a square design element that when clicked accepts the choice offered.

CheckBoxGroup is a component that presents related checkbox options.

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

HPE Design System FileInput

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

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.

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

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

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 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 is a field used in forms to capture short entries.

Visualizations

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

HPE Tables Preview

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.

A NameValueList displays a group of NameValuePairs.

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

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 is a small motion graphic element that indicates a loading state for quick, asynchronous tasks.

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

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