HPE Design System
HPE
Design System
Foundation
Components
Templates
Extend

Components

Our component library provides a vetted set interface elements for use in your applications and websites. Using the latest web technology to keep you compliant and performant.

Layouts

Components
Box
Box is where it all starts. 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. Box properties allow you to customize the footer.
Components
Grid
The Grid component is used to layout content. Responsive grid is important to consider in every use case.
HPE
Text
Components
Header
Header is a Box with a set of preset properties for introductory content.
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.
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 affords content to be delivered progressively.
The ship's
Anchor
.
Components
Anchor
Used with text based navigation, such as inline text.
Components
Button
Buttons are used to indicate actions that can be performed.
Components
Menu
Menu contains a list of actions. When a menu item is clicked, 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
Find content corresponding to keyword queries.
Components
Tabs
Tabs allow a user to access content while maintaining the existing context.
HPE tooltip preview
Components
Tooltip
A tooltip is used to specify extra information when the user moves the mouse pointer over the element.

Inputs

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
DateInput
A widget which allows the user to select a date or range of dates from a calendar.
Components
MaskedInput
MaskedInput allows you to specify formalized text within a form field.
Components
RadioButtonGroup
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
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.

Visualizations

HPE Spinner preview
Components
Spinner
A loading state for quick asynchronous tasks.
HPE Tables Preview
Components
Table
Table presents data in a column and row format.