Jump to section
Navigational cards enable the user to identify, compare, and choose their desired next step.
Activities & Tasks
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.
Anatomy
1b
1a
2
3
Helpful Guides
Access step by step guides on getting the most out of your Greenlake console.
- Card identifier: This region is intended to provide the user with context on what the card is about.
- a. Title (required): For navigational cards, this should be the name of the page the user will be navigated to.
- b. Icon/Avatar (optional): A unique icon/avatar that assists the user in identifying their desired navigational path.
- Action (required): If there is a single action on the card, the entire card should be clickable. If the entire card is clickable, a visual of a button in not required in the card.
- Description (optional): A short paragraph that elaborates on the destination of the card.
Presentation
- Present navigational cards in a group with other navigational cards of the same category.
- For example, a group of navigational cards may be used to provide a user with a means of navigating from a hub called “Manage” to various spoke pages such as “Roles and Permissions”, “Account Settings”, etc.
- Use the same anatomy and layout as other navigational cards in the same group.
- This visual consistency further establishes the relationship that these cards are part of the same category.
Examples
These are example layouts for various use cases.
Single action
Activities & Tasks
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.
My Products
Apache Spark
By HPE
Open source analytics engine for big data processing, with built-in modules for streaming, SQL, machine learning and graph processing.
CTERA
By CTERA
CTERA’s mission is to enable cloud-driven enterprise IT organizations to deliver secure file services.
SingleStore
By SingleStore
SingleStore is the world’s first cloud database which unifies transactions and analytics and provides hybrid and on-premises deployment option.
Starbust Enterprise
By Starburst
Starburst Enterprise is a fully supported, production-tested and enterprise-grade distribution of open source Trino.
Applications
Networking
Manage switching, Wireless LAN, SD-WAN infrastructure for campus and branch networks with AI, automation, and security.
Storage
Data services to simplify data management and protection across hybrid cloud.
Compute Ops Management
Securely manage compute and workload solutions across your entire estate.
Workloads
Manage your hybrid and multi-cloud workload services to view usage, cost, and more.
Row-orientation
Related
Related content you may find useful when using Navigational card.
Still have questions?
Something missing or looking for more information? Get in touch to help make the HPE Design System better.