HPE
Design System
Foundation
Components
Templates
Learn
Jump to section
Principles
Types of cards
Formatting
Alignment
Spacing
Interactions
Mouse
Keyboard
Accessibility
Card titles
Card sections
Misuses
Components

Card

A container providing at-a-glance information and easy access to more details.

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.

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.

Call to action

Entice the user down a desired path.

Read guidance
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.

Navigational

Provide the user with a means of wayfinding.

Read guidance

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.

Do

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

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.

View guides

Invite Users

Send a sign-up link to users so you can collaborate with your team.

Send invite

Manage Devices

Add, apply licenses, and assign devices in your device inventory.

Manage devices
Do

Use a "medium" gap between cards.

Helpful Guides

Access step by step guides on getting the most out of your GreenLake console.

View guides

Invite Users

Send a sign-up link to users so you can collaborate with your team.

Send invite

Manage Devices

Add, apply licenses, and assign devices in your device inventory.

Manage devices
Don't

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" or as="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.
  • 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

56 items
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
Do

Style status filter buttons as default buttons when the buttons are placed on the same page as the data they will be filtering.

Servers

56 items
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

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 logo

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.

View guides

Invite Users

Send a sign-up link to users so you can collaborate with your team.

Send invite

Manage Devices

Add, apply licenses, and assign devices in your device inventory.

Manage devices
Do

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 logo

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.

View guides

Invite Users

Send a sign-up link to users so you can collaborate with your team.

Send invite

Manage Devices

Add, apply licenses, and assign devices in your device inventory.

Manage devices
Don't

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.

Related

Related content you may find useful when using Card.

HPE Lists Preview

Lists

Go-to patterns for displaying many services, devices, users, and more.
HPE Dashboards Preview

Dashboards

At-a-glance preview for operation critical information with easy access to areas requiring attention.
HPE Navigation Preview

Navigation

The entry point for the expansive topic of Navigation.

Still have questions?

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

Edit this page