PageHeader
A component providing users a consistent, predictable layout and location for the page title, contextual navigation, and actions across all HPE applications. PageHeader is placed at the top of the page.
The PageHeader's title communicates the context of the page. The subtitle elaborates secondary information about the page. The user is also able to access navigation to the parent page and any relevant page-level actions.
Anatomy
Page Identifier: This region is intended to provide the user with context on what the page is about.
Contextual Navigation: A Reverse Anchor is required on all child pages as a means of navigating up the information hierarchy.
Page-Level Actions (optional): This region is reserved for actions that affect the entire page or kick-off a task flow.
Responsive behavior and content prioritization
The main purpose of a page header is to identify a page and its context within an application. Therefore, the title and subtitle regions should receive screen priority when they come into contact with page-level actions.
The region containing the title and subtitle should:
- Flex to fill the available horizontal space on the page.
- Have a minimum width of "medium" on
medium-xlarge
breakpoints and "small" onxsmall-small
breakpoints to avoid excessive wrapping.
Page-level actions should:
- Have a width of "auto" by default.
- Progressively collapse into an overflow menu as screen width becomes limited. This should follow guidance on responsive behavior of actions.
Title
A title is a required element of the page and should:
- Always be an h1, and most often should be
size="small"
. - Uniquely and concisely identify the page. No two pages under the same parent should have the same name.
- Follow title case capitalization (i.e., List of Clusters, My Account).
- Wrap if too long for the available space. See Responsive Behavior and Content Prioritization for more guidance.
- Be left-aligned with page content.
Subtitle
A subtitle is an optional element providing additional information about the contents of the page.
A subtitle should:
- Concisely elaborates what the page is about, setting expectations as to what a user can find and do. This could be additional information such as ownership of an application, timestamps, or a name to represent by whom a piece of information was created.
- Be located below the title and left-aligned with page content.
- Wrap at the max-width for the paragraph's font-size in order to optimize the readability.
Include concise, high-priority metadata in the subtitle that aids page identification.
Don't clutter the Page Header with all of the page metadata. Instead, include this in the page content.
Reverse anchor
A reverse anchor is required on all child pages and should:
- Be located above the title and left-aligned with page content.
- Be labelled with the name of the parent page and accompanied by the "FormPrevious" icon.
- Navigate the user from the child page to its parent.
- Not be used on top-level pages because they do not have a parent.
Example of child page
Child pages include a reverse anchor which allows the user to navigate from the child page to its parent.
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 | ||
Example of top-level page
Top-level pages do not display a reverse anchor because they do not have a parent.
Manage Account
Manage your HPE Common Cloud Account.
Account Details
View and edit your company account information.Servers
Manage all of your HPE servers.Users
Lookup users and manage their access.Authentication
Improve security and login with ease with SAML or RADIUS.Subscriptions
Manage your device and service subscriptions.Tags
Manage tags that can be associated with devices.Page-level actions
Page-level actions affect the entire page or launch a task flow.
All actions should:
- Have clear and concise button labels.
- Use verb+noun format to provide sufficient context on action expectations (i.e., Edit profile). See button labeling for more guidance.
- Be right-aligned with the page content.
- Follow button ordering guidance for right-aligned buttons.
Additional notes:
- A primary action should only be used if the primary purpose of the page is to faciliate performing that action. Most pages will not have a primary action.
- Do not include actions related to table or list data (such as create, update, and delete) in the page-level actions. These should be placed in the toolbar above the data.
- Page-level actions may be in the form of a button or in a menu.
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 | ||
Include actions affecting the entire page in the page-level actions. Actions related to table or list data (such as create, update, and delete) should be placed in the list's or table's toolbar.
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 include actions related to table or list data (such as create, update, and delete) in the page-level actions.
Responsive behavior of actions
Page-level actions is a flexible region in which a wide variety of actions may live. Actions in this region should be thought of in terms of their importance to a user and progressively collapse based on their priority.
A primary action should:
- Only be used if the primary purpose of the page is the perform that action. Most pages won't have a primary button.
- Always remain visible, if present.
Secondary and default actions:
- Should remain visible if there is space but collapse into an action menu if there is not enough space.
- Default buttons should collapse first because they are lower priority than secondary buttons.
If the screen breakpoint is small
or xsmall
:
- If there is a primary action, then all actions should appear beneath the title and subtitle and be left-aligned with page content. To implement, apply
responsive={true}
to PageHeader. - If there is no primary action, then the overflow menu should remain to the right of the title.
Collapse default and secondary buttons into an action menu. Always keep the primary action visible if it exists. At xsmall and small breakpoints, place the actions underneath the title and subtitle.
On xsmall and small screens when a primary action exists, do not collapse the primary button into an action menu.
On xsmall and small screens when no primary action exists, leave the action menu in the same row as the title.
Still have questions?
Something missing or looking for more information? Get in touch to help make the HPE Design System better.