
Unleash the power of data
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.
Helpful Guides
Access step by step guides on getting the most out of your GreenLake console.
Principles
Cards are containers that display content and actions on a single topic. They should be easy to scan for relevant and actionable information.
Contained - A card is identifiable as a single, contained unit.
Independent - A card can stand alone, without relying on surrounding elements for context.
Individual - A card cannot merge with another card, or divide into multiple cards.
Summarized - A card by nature has limited real estate, so it should present summarized information.
Cards should be used when:
- Presenting high-level, summarized pieces of information.
- Presenting an item, or collection of items, which can best be consumed visually.
In all cases the presentation allows users to quickly scan the content and navigate to underlying detail if desired.
Types of cards
A card is a rich, flexible UI component; its anatomy, visual/interactive treatments, and relationship to its peers help to establish and reinforce its purpose. The following are distinct types of cards that have unique purposes and best practices.

Unleash the power of data
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.
Helpful Guides
Access step by step guides on getting the most out of your GreenLake console.
Status-based navigation
Quickly assist the user to navigate to resources, tasks, or processes requiring their attention and/or action.
Guidance and examples coming soon.
Resource
Allow a user to scan a set of resource options and choose one based on their needs.
Guidance and examples coming soon.
Analytic
Present measures and metrics in short, digestible content pieces and allow a user to navigate to underlying detail is needed.
Guidance and examples coming soon.
Formatting
Alignment
Use left-alignment whenever possible in order to optimize readability.
HPE GreenLake Trial
Want even more capabilities? Request a full trial for HPE GreenLake for Private Cloud, and we'll set up a trial designed to show you exactly how our turnkey private cloud solution can work for your business.
Left-align text and content.
HPE GreenLake Trial
Want even more capabilities? Request a full trial for HPE GreenLake for Private Cloud, and we'll set up a trial designed to show you exactly how our turnkey private cloud solution can work for your business.
Don't center text and content. This hurts readability.
Spacing
For cards within the same layout section, place a minimum gap of "medium" between cards.
Helpful Guides
Access step by step guides on getting the most out of your GreenLake console.
Invite Users
Send a sign-up link to users so you can collaborate with your team.
Manage Devices
Add, apply licenses, and assign devices in your device inventory.
Use a "medium" gap between cards.
Helpful Guides
Access step by step guides on getting the most out of your GreenLake console.
Invite Users
Send a sign-up link to users so you can collaborate with your team.
Manage Devices
Add, apply licenses, and assign devices in your device inventory.
Don't use a gap smaller than "medium" between cards because this creates a crowded feeling.
Interactions
Mouse
- If a card does not contain an action behavior, do not provide hover feedback.
- If a card has a singular action behavior, the entire card can be clickable. Provide a hand cursor change and large elevation on hover.
- If a card contains a multiple action behaviors, such as a primary action and a secondary action, provide the documented hover feedback on the individual actionable elements only.
Keyboard
Key | Interaction |
---|---|
Tab | Move forward through the cards (if entire card is clickable) or through logical order of the interactive elements. |
Shift + Tab | Move backward through the cards (if entire card is clickable) or through logical order of the interactive elements. |
Enter | Perform the card action (if entire card is clickable) or the corresponding action of the focused interactive element. |
Accessibility
Card titles
Card titles should use a Heading of the correct semantic heading level based on where the card is in the document. For example, a card nested under a Heading level 2 should use a Heading level 3 for its title.
Don't use Text for the card title as this will hurt the experience for users of assisstive technologies.
Card sections
When cards are presenting as a group, they should function as a list.
- Apply
as="ul"
oras="ol"
(depending on if the list is orderded or not) to the cards' layout container (whether that be a Grid, List, or other layout component).- Some default browser padding may need to be overridden. This can be done by applying
pad="none"
, or the desired padding, to the container.
- Some default browser padding may need to be overridden. This can be done by applying
- Apply
as="li"
to the individual cards.
Misuses
- When data attributes across items needs to be analyzed, sorted, compared, and filtered, a card may not be the best tool. Instead, DataTable may be more appropriate tool to meet these needs.
- Cards should not be used as a control to filter data on the same screen. A button is the appropriate control to apply a filter. Alternatively, cards may be used to present summarized information and allow a user to navigate to a pre-filtered view of that information.
Servers
Status | ||||||
---|---|---|---|---|---|---|
Server 1 | 8899569448808967 | Not connected | On | Proliant SY 480 Gen10 | ||
Server 2 | 482148808968 | Connected | Off | Proliant SY 990 Gen9 | ||
Server 3 | 3890108963 | Not connected | Off | Proliant SY 990 Gen9 | ||
Server 4 | 8508964 | Connected | On | Proliant SY 660 Gen10 | ||
Server 5 | 3123i4264 | Connected | On | Proliant SY 660 Gen10 | ||
3M442501WV | 4208964 | Connected | Off | ProLiant DL380 Gen10 | ||
ZFD3712GP | CCD21712GP | Not connected | On | -- | ||
FTR1237J | GGF24045X | Not connected | On | -- | ||
FTRXX237J | FT0237J | Not connected | Off | -- | ||
FTR8237J | 229501KR | Connected | Off | ProLiant DL380 Gen10 | ||
2221K2501KRL | 2282501KR | Connected | On | ProLiant DL385 Gen10 Plus | ||
SGFF850T8LK | SGFF850T8LK | Not connected | Unknown | -- | ||
22833501KR | 228298501KR | Not connected | Unknown | -- | ||
SGFF850T8LK | 2332501WR | Connected | On | ProLiant DL380 Gen10 | ||
MXQ824045Q | MXQ824045Q | Connected | On | ProLiant DL360 Gen10 | ||
S76GH939821GF3 | S76GH939821GF3 | Connected | On | ProLiant DL360 Gen10 | ||
C89-20146 | C8920146 | Not connected | On | -- | ||
2LLP73300ZX | 2LLP73300ZX | Not connected | Unknown | -- | ||
DAOI-8240458 | MX78SA458 | Connected | On | ProLiant DL360 Gen10 | ||
9AS-02708SP | 9AS-02708SP | Not connected | On | ProLiant DL325 Gen10 Plus | ||
DF-R501X5.lab | DF-R501X5 | Connected | On | ProLiant DL380 Gen10 | ||
JYL150TYL | JYL150TYL | Not connected | On | -- | ||
DXS4045N | DXS4045N | Not connected | On | -- | ||
XFR.0278 | M48902278 | Connected | On | ProLiant DL360 Gen10 | ||
RRR50TXT | RRR50TXT | Not connected | Unknown | -- | ||
CFDE0YPQ | CFRT0YPQ | Not connected | On | -- | ||
rel34.lab.com | 45FREWY3 | Connected | On | ProLiant DL380 Gen10 | ||
92RO010Z | FRE43210Z | Connected | On | ProLiant DL380 Gen10 | ||
RRE44045S | 39TO24045S | Not connected | Off | -- | ||
RT21867 | CN70RT867 | Not connected | Unknown | -- | ||
IL1Kl.lab | 2M29001KH | Not connected | On | ProLiant DL380 Gen10 | ||
453FFEW3 | 56TGD321 | Connected | On | ProLiant DL360 Gen10 | ||
5G009LK | SFEL2T9LK | Not connected | On | -- | ||
TR902JG21 | TR902JG21 | Connected | On | ProLiant DL380 Gen10 | ||
RE4.322.lab | HTR340465 | Connected | On | ProLiant DL360 Gen10 | ||
LME4.ir.lab | 2M25323Y7 | Connected | On | ProLiant DL380 Gen10 | ||
34265FDE49 | MXFFO9274 | Connected | On | ProLiant DL360 Gen10 | ||
CFDE1GBW | CFDE1GBW | Connected | On | ProLiant DL385 Gen10 Plus | ||
524FAV32F | 524FAV32F | Connected | Off | ProLiant DL360 Gen10 | ||
8742DS576 | 8742DS576 | Connected | On | ProLiant DL380 Gen10 | ||
2MFD5t0110 | FDE34zh0110 | Connected | On | ProLiant DL380 Gen10 | ||
34EP0065 | 54FDE0065 | Not connected | On | -- | ||
709522R | 7621PP22R | Not connected | On | -- | ||
432DE45TH | 432DE45TH | Connected | Off | ProLiant DL360 Gen10 | ||
FG500352 | FG500352 | Connected | Off | ProLiant DL380 Gen10 | ||
0-S024046C | 0-S024046C | Connected | Off | ProLiant DL360 Gen10 | ||
U005E936 | U005E936 | Not connected | On | -- | ||
6432FSCN | 6432FSCN | Connected | On | ProLiant DL380 Gen10 Plus | ||
3234MFG5.lab | 452DF002R8 | Connected | Off | ProLiant DL380 Gen10 | ||
45FER2sW | 45FER2sW | Connected | On | ProLiant DL360 Gen10 | ||
Style status filter buttons as default buttons when the buttons are placed on the same page as the data they will be filtering.
Servers
Status | ||||||
---|---|---|---|---|---|---|
Server 1 | 8899569448808967 | Not connected | On | Proliant SY 480 Gen10 | ||
Server 2 | 482148808968 | Connected | Off | Proliant SY 990 Gen9 | ||
Server 3 | 3890108963 | Not connected | Off | Proliant SY 990 Gen9 | ||
Server 4 | 8508964 | Connected | On | Proliant SY 660 Gen10 | ||
Server 5 | 3123i4264 | Connected | On | Proliant SY 660 Gen10 | ||
3M442501WV | 4208964 | Connected | Off | ProLiant DL380 Gen10 | ||
ZFD3712GP | CCD21712GP | Not connected | On | -- | ||
FTR1237J | GGF24045X | Not connected | On | -- | ||
FTRXX237J | FT0237J | Not connected | Off | -- | ||
FTR8237J | 229501KR | Connected | Off | ProLiant DL380 Gen10 | ||
2221K2501KRL | 2282501KR | Connected | On | ProLiant DL385 Gen10 Plus | ||
SGFF850T8LK | SGFF850T8LK | Not connected | Unknown | -- | ||
22833501KR | 228298501KR | Not connected | Unknown | -- | ||
SGFF850T8LK | 2332501WR | Connected | On | ProLiant DL380 Gen10 | ||
MXQ824045Q | MXQ824045Q | Connected | On | ProLiant DL360 Gen10 | ||
S76GH939821GF3 | S76GH939821GF3 | Connected | On | ProLiant DL360 Gen10 | ||
C89-20146 | C8920146 | Not connected | On | -- | ||
2LLP73300ZX | 2LLP73300ZX | Not connected | Unknown | -- | ||
DAOI-8240458 | MX78SA458 | Connected | On | ProLiant DL360 Gen10 | ||
9AS-02708SP | 9AS-02708SP | Not connected | On | ProLiant DL325 Gen10 Plus | ||
DF-R501X5.lab | DF-R501X5 | Connected | On | ProLiant DL380 Gen10 | ||
JYL150TYL | JYL150TYL | Not connected | On | -- | ||
DXS4045N | DXS4045N | Not connected | On | -- | ||
XFR.0278 | M48902278 | Connected | On | ProLiant DL360 Gen10 | ||
RRR50TXT | RRR50TXT | Not connected | Unknown | -- | ||
CFDE0YPQ | CFRT0YPQ | Not connected | On | -- | ||
rel34.lab.com | 45FREWY3 | Connected | On | ProLiant DL380 Gen10 | ||
92RO010Z | FRE43210Z | Connected | On | ProLiant DL380 Gen10 | ||
RRE44045S | 39TO24045S | Not connected | Off | -- | ||
RT21867 | CN70RT867 | Not connected | Unknown | -- | ||
IL1Kl.lab | 2M29001KH | Not connected | On | ProLiant DL380 Gen10 | ||
453FFEW3 | 56TGD321 | Connected | On | ProLiant DL360 Gen10 | ||
5G009LK | SFEL2T9LK | Not connected | On | -- | ||
TR902JG21 | TR902JG21 | Connected | On | ProLiant DL380 Gen10 | ||
RE4.322.lab | HTR340465 | Connected | On | ProLiant DL360 Gen10 | ||
LME4.ir.lab | 2M25323Y7 | Connected | On | ProLiant DL380 Gen10 | ||
34265FDE49 | MXFFO9274 | Connected | On | ProLiant DL360 Gen10 | ||
CFDE1GBW | CFDE1GBW | Connected | On | ProLiant DL385 Gen10 Plus | ||
524FAV32F | 524FAV32F | Connected | Off | ProLiant DL360 Gen10 | ||
8742DS576 | 8742DS576 | Connected | On | ProLiant DL380 Gen10 | ||
2MFD5t0110 | FDE34zh0110 | Connected | On | ProLiant DL380 Gen10 | ||
34EP0065 | 54FDE0065 | Not connected | On | -- | ||
709522R | 7621PP22R | Not connected | On | -- | ||
432DE45TH | 432DE45TH | Connected | Off | ProLiant DL360 Gen10 | ||
FG500352 | FG500352 | Connected | Off | ProLiant DL380 Gen10 | ||
0-S024046C | 0-S024046C | Connected | Off | ProLiant DL360 Gen10 | ||
U005E936 | U005E936 | Not connected | On | -- | ||
6432FSCN | 6432FSCN | Connected | On | ProLiant DL380 Gen10 Plus | ||
3234MFG5.lab | 452DF002R8 | Connected | Off | ProLiant DL380 Gen10 | ||
45FER2sW | 45FER2sW | Connected | On | ProLiant DL360 Gen10 | ||
Don’t use a card to wrap a set of status filter buttons if clicking on one of those buttons will filter data that exists on the same page as that card. Cards should act as independent regions that do not affect surrounding content. However, placing these buttons in a card would be appropriate on a dashboard, where clicking on one of the status buttons would navigate to a different page that is filtered by the selected status.
- A card should not be used to group complex content into a single container. A card is meant to be individual, presenting a single, summarized topic which cannot be divided.
Manage Account
Manage your HPE Common Cloud account
Acme Corporation
- Account ID
- 0a7141c332ec4c4aae04aa4b8fe59deb
- Account Type
- Standard Enterprise Account
- Account Status
- Registered
Helpful Guides
Access step by step guides on getting the most out of your GreenLake console.
Invite Users
Send a sign-up link to users so you can collaborate with your team.
Manage Devices
Add, apply licenses, and assign devices in your device inventory.
Leave general page content outside of a card and align it flush with the left page margin.
Manage Account
Manage your HPE Common Cloud account
Acme Corporation
- Account ID
- 0a7141c332ec4c4aae04aa4b8fe59deb
- Account Type
- Standard Enterprise Account
- Account Status
- Registered
Helpful Guides
Access step by step guides on getting the most out of your GreenLake console.
Invite Users
Send a sign-up link to users so you can collaborate with your team.
Manage Devices
Add, apply licenses, and assign devices in your device inventory.
Don't use a card just to show general page content. The purpose of a card is to group pieces of information that should be visually separated from the main page content in order to emphasize the relationship of those pieces to each other.
Still have questions?
Something missing or looking for more information? Get in touch to help make the HPE Design System better.