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.

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.

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.

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.

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.

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.

Child pages include a reverse anchor which allows the user to navigate from the child page to its parent.

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:

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

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.