HPE
Design System
Foundation
Components
Templates
Learn
Jump to section
Anatomy
Responsive behavior and content prioritization
Title
Subtitle
Reverse anchor
Example of child page
Example of top-level page
Page-level actions
Responsive behavior of actions
Components

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.

Dashboard

Devices

View and manage devices.

Anatomy

2
1a
1b
3
Devices

L2Pod-FTC02

View and edit details for this device.

Diagram illustrating the four main content regions of a PageHeader 1a. Title, 1b. Subtitle, 2. Contextual Navigation, 3. Page-Level Actions.
  1. Page Identifier: This region is intended to provide the user with context on what the page is about.

    • a. Title (required): A short and descriptive title that uniquely identifies the page.
    • b. Subtitle (optional): Concise, contextual information elaborating the purpose of the page.
  2. Contextual Navigation: A Reverse Anchor is required on all child pages as a means of navigating up the information hierarchy.

  3. 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" on xsmall-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.
Resize your window to see how the content regions adapt at various screen widths.
Devices

L2Pod-FTC02

View and edit details for this device.

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.
Orders

Order 201928

Created on
05/05/2020
Do

Include concise, high-priority metadata in the subtitle that aids page identification.

Orders

Order 201928

Status
In transit
Created on
05/05/2020
Created by
Jane Doe
Don't

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.

Global Header
Manage Account

Servers

View and manage 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

Example of top-level page

Top-level pages do not display a reverse anchor because they do not have a parent.

Global Header

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.
Global Header
Dashboard

Servers

View and manage 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

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.

Global Header
Dashboard

Servers

View and manage 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 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.
Resize your window to see how the actions collapse and respond at various screen widths.
Devices

L2Pod-FTC02 Device

View and edit details about this device.

Do

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.

Devices

L2Pod-FTC02 Device

View and edit details about this device.

Don't

On xsmall and small screens when a primary action exists, do not collapse the primary button into an action menu.

Devices

L2Pod-FTC02 Device

View and edit details about this device.

Do

On xsmall and small screens when no primary action exists, leave the action menu in the same row as the title.

Related

Related content you may find useful when using PageHeader.

HPE Page Layouts Preview

Page Layouts

Choosing a layout is an important first step in designing a user interface. These guidelines will help create a consistent user experience across HPE applications and services.

Content Layouts

Creating responsive, adaptable content layouts is central to the user experience.
HPE Page Preview

Page

Page is a helpful container providing consistent layouts across all HPE applications.

Still have questions?

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

Edit this page