HPE Design System
HPE
Design System
Foundation
Components
Templates
Extend

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

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
Card
A container providing at-a-glance information and easy access to more details.
© 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
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.
HPE
Text
Components
Header
Header is a Box with a set of preset properties for introductory content.
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.
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.
4
Components
Stack
A Stack component is a container that stacks content on top of each other.

Controls

HPE Accordion Preview
Components
Accordion
The accordion is a list with expanded and collapsed states. When clicked opened, it reveals more detail.
The ship's
Anchor
.
Components
Anchor
Hyperlinks used with text-based navigation, such as inline text.
Components
Button
Buttons are graphic elements that indicate to users that actions can be performed.
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.
HPE Design System Pagination
Components
Pagination
Pagination divides content into separate pages in order to enhance navigation to specific items.
Components
Search
Search is a field that allows a user to input keywords for content they are looking for.
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.
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.

Inputs

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.
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.
Components
MaskedInput
MaskedInput allows you to specify formatted text within a form field.
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
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.

Visualizations

Components
Avatar
An Avatar displays an image, logo, or initials to help users efficiently identify a person, company, or entity.
HPE Tables Preview
Components
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.
Components
NameValueList
A NameValueList displays a group of NameValuePairs.
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.
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.
Name : Value
Components
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
Components
All Components
Grommet components are the building blocks of the HPE Design System.