HPE Design System

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

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.

The Grid component is used to layout content. Responsive grid is important to consider in every use case.

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.

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.

Find content corresponding to keyword queries.

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

HPE tooltip preview

A tooltip 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.

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.

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

Table presents data in a column and row format.