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.
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-xlargebreakpoints and "small" on
xsmall-smallbreakpoints 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.
A title is a required element of the page and should:
- Always be an h1, and most often should be
- 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.
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.
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.
Example of Top-Level Page
Top-level pages do not display a reverse anchor because they do not have a parent.
Page-level actions affect the entire page or launch a task flow.
All actions should:
- 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.
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.
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
- 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
- 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.
Don't collapse 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.
Something missing or looking for more information? Get in touch to help make the HPE Design System better.