HPE
Design System
Foundation
Components
Templates
Learn
Jump to section
Layout
Box
Card
Footer
Grid
Header
Layer
Main
Sidebar
Stack
Type
Heading
Markdown
Paragraph
Text
Controls
Accordion
Anchor
Button
Drop
DropButton
Menu
Nav
Pagination
Tabs
Tip
Input
CheckBox
CheckBoxGroup
DateInput
FileInput
Form
FormField
MaskedInput
RadioButtonGroup
RangeInput
RangeSelector
Select
TextArea
TextInput
Visualizations
Avatar
Calendar
Clock
DataChart
Diagram
List
Meter
Spinner
DataTable
WorldMap
Media
Carousel
Image
Video
Utilities
AnnounceContext
Collapsible
Grommet
InfiniteScroll
Keyboard
ResponsiveContext
SkipLinks
ThemeContext
Components

All Components

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

The HPE Design System provides guidance and theming for a large subset of Grommet components, but is not exhaustive. 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.

Below you will find a comprehensive list of all Grommet components, examples for each, and either a link to Design System usage guidance or Grommet documentation in cases where guidance is not yet available.

Jump to a specific component type:

  • Layout
  • Type
  • Controls
  • Input
  • Visualizations
  • Media
  • Utilities

Layout

Box

Boxes are containers that drive the layout of your content.
Boxes can be various sizes.

Card

Layers of purple, pink, orange, and yellow in slices
Virtual event

Unleash the power of data

June 25, 2022

Propelled by the nexus of data, cloud, and AI, HPE is delivering groundbreaking innovations that completely reimagine how organizations unleash the power of their data.

Footer

© 2023 Hewlett Packard Enterprise Development LP

Grid

Header
Main
Footer

Header

Layer

Main

Header
Main
Footer

Sidebar

This component does not currently have HPE Design System specific guidance, but you can reference the Grommet docs for details on its properties.

Stack

4

Type

Heading

h1 Heading

h2 Heading

h3 Heading

h4 Heading

Markdown

This component does not currently have HPE Design System specific guidance, but you can reference the Grommet docs for details on its properties.

Here is some markdown. You can read more about markdown options in the Markdown to JSX docs.

Paragraph

Paragraph xxlarge

Paragraph xlarge

Paragraph large

Paragraph default

Paragraph small

Text

Text 6xl
Text 5xl
Text 4xl
Text 3xl
Text xxlarge
Text xlarge
Text large
Text default
Text small
Text xsmall

Controls

Accordion

Anchor

Default anchor: Anchor

Button

Drop

This component does not currently have HPE Design System specific guidance, but you can reference the Grommet docs for details on its properties.

Target

DropButton

This component does not currently have HPE Design System specific guidance, but you can reference the Grommet docs for details on its properties.

Menu

Nav

Pagination

  • …

Tabs

Tip

Input

CheckBox

CheckBoxGroup

DateInput

FileInput

Drag and drop

Form

Sign Up

for a Hewlett Packard Enterprise account
  • One uppercase letter
  • One lowercase letter
  • One special character
  • At least 8 characters

FormField

MaskedInput

RadioButtonGroup

RangeInput

0
100

RangeSelector

This component does not currently have HPE Design System specific guidance, but you can reference the Grommet docs for details on its properties.

1
2
3
4
5
6
7
8
9
10
11

Select

TextArea

TextInput

Visualizations

Avatar

Calendar

This component does not currently have HPE Design System specific guidance, but you can reference the Grommet docs for details on its properties.

May 2023

Clock

This component does not currently have HPE Design System specific guidance, but you can reference the Grommet docs for details on its properties.

1
6
:
2
1
:
2
2

DataChart

This component does not currently have HPE Design System specific guidance, but you can reference the Grommet docs for details on its properties.

7/1
7/2
7/3
7/4
7/5
7/6
7/7
150
0
0
0

Diagram

This component does not currently have HPE Design System specific guidance, but you can reference the Grommet docs for details on its properties.

List

  • Eric Soderberg
    Active
  • Shimrit Yacobi
    Inactive
  • Chris Carlozzi
    Active
  • Matthew Glissmann
    Active
  • Taylor Seamans
    Inactive

Meter

This component does not currently have HPE Design System specific guidance, but you can reference the Grommet docs for details on its properties.

30%

Spinner

DataTable

Storage Pools

Arrays
Pinned
%
thh8y
Asup-array01-lvs (default)
Asup
asup-array01-lvs
14.6
1.9
3%
333.2
7phfb
Dev-K8-Sym-R5-3 (default)
Dev
harm-stage-array01
204.2
4.6
5%
333.2
79kyz
Dev36-erray01 (default)
Dev
harm-stage-array02
173.4
3.7
7%
3955.2
95xjq
asup-array1 (default)
Asup
harm-stage-array04
118.8
2.8
2%
3.9
ccnpr
Dev-K8-Sym-R5-3 (default)
Dev
Harm-cs-stage-R4-5
62.8
2.9
8%
333.2
0knx4
asup-array2 (default)
Asup
ds-array02
82.5
10.2
0%
3955.2
qeqgj
Dev36-varray02 (default)
Dev
ds-array01
92.5
11.3
0%
333.2
s9419
DevHarmCs2R39
Dev
harm-stage-array03
7.2
0.1
1%
333.2
56t7a
DevStageSymR31 (default)
Dev
rtp-array198
64.3
1.4
0%
333.2
koten
asup-array2 (default)
Asup
ds-array02
5.1
11.4
0%
3955.2
j8wyc
Dev36-varray02 (default)
Dev
ds-array01
0.6
1.2
0%
333.2
l4ai2
DevHarmCs2R39
Dev
harm-stage-array03
47.9
2.3
0%
333.2
ybzf3
DevStageSymR31 (default)
Dev
rtp-array198
27.9
20.5
3%
333.2

WorldMap

This component does not currently have HPE Design System specific guidance, but you can reference the Grommet docs for details on its properties.

Media

Carousel

This component does not currently have HPE Design System specific guidance, but you can reference the Grommet docs for details on its properties.

Photo of a woman sitting on a couch and using her laptop during the day
Man working from home at a desk by a window with a baby on his lap
Woman and man standing in a room of HPE servers

Image

This component does not currently have HPE Design System specific guidance, but you can reference the Grommet docs for details on its properties.

Playing cards representing the HPE Design System are spread across a surface and depict the four pillars of the Design System: Foundation, Components, Templates, and Extend.

Video

This component does not currently have HPE Design System specific guidance, but you can reference the Grommet docs for details on its properties.

NaN:NaN

Utilities

AnnounceContext

This component does not currently have HPE Design System specific guidance, but you can reference the Grommet docs for details on its properties.

Collapsible

This component does not currently have HPE Design System specific guidance, but you can reference the Grommet docs for details on its properties.

Grommet

This component does not currently have HPE Design System specific guidance, but you can reference the Grommet docs for details on its properties.

InfiniteScroll

This component does not currently have HPE Design System specific guidance, but you can reference the Grommet docs for details on its properties.

Keyboard

This component does not currently have HPE Design System specific guidance, but you can reference the Grommet docs for details on its properties.

ResponsiveContext

This component does not currently have HPE Design System specific guidance, but you can reference the Grommet docs for details on its properties.

SkipLinks

This component does not currently have HPE Design System specific guidance, but you can reference the Grommet docs for details on its properties.

ThemeContext

This component does not currently have HPE Design System specific guidance, but you can reference the Grommet docs for details on its properties.

Still have questions?

Something missing or looking for more information? Get in touch to help make the HPE Design System better.

Edit this page