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 is where it all starts. 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. Box properties allow you to customize the footer.

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.

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

The Layer component is flexible and can be used in multiple use cases such as modal, dialogs, or notifications.

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

HPE Page Preview

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

HPE PageHeader Preview

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

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

Controls

HPE Accordion Preview

The accordion affords content to be delivered progressively.

Used with text based navigation, such as inline text.

Buttons are used to indicate actions that can be performed.

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

Find content corresponding to keyword queries.

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

HPE Tip preview

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

Inputs

When the user needs to select one or more options, use a checkbox.

When the user needs to select one or more options from a set of options, use a CheckBoxGroup.

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

HPE Design System FileInput

An input used to upload one or more files.

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

RadioButtonGroup

When one option of a set of options can be specified, use the RadioButtonGroup component.

The RangeInput component is a slider control that provides a handle the user can move to make changes to values.

Flexible input allowing users to choose from a list of options.

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

When you need to allow the user to provide longer forms of content, use a TextArea component.

The TextInput component allows the user to input shorter forms of data and content.

Visualizations

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 transparent clarity for task and system statuses.

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.