PageHeader
Overview#
Contains the page title and associated actions (including breadcrumbs, page-level actions.)
Design Guidelines#
Use when#
- State the purpose and location of the page.
- There are page-level actions.
Don't use when#
- Information or actions are not page-level.
Visual Style#
- Page titles should be the largest text element on the page.
- Page titles should reflect either the names used to navigate to them or the primary action performed on the page.
- Page titles should be no more than three words.
- Always follow sentence casing rules for titles.
Page headers may also consist of several other optional sections:
Breadcrumb#
- See Breadcrumbs. (Documentation forthcoming.)
- Always use the page title as the content of the breadcrumb.
Secondary action#
- Display under the text of the title.
- This should be the size of body text, with the appropriate link colour.
Primary actions#
- Display no more than one default or ghost button and one primary button in the header.
- Align buttons right.
Editorial#
- Page-level actions should be kept to a minimum.
- A page should have one primary action. This may be paired with a
Cancelaction in the case of actions that affect the current page.
- A page should have one primary action. This may be paired with a
- Instances to use a page level action:
- An action that applies to the entire page (ex. Save changes).
- Take the user to a page that will make an adjustment to the page (ex. Add a new value).
- Never use breadcrumbs to control a wizard flow.
Examples#
Title only#
Use when the page title is all that is needed.
Title and breadcrumb#
Use when a page has a parent page.
Title and extra#
Use when there are primary page-level actions.
Title and content links#
Use when there are secondary page-level actions.
Title and primary action#
Use when there are primary page-level actions that impact the page.
Title and secondary action#
Use when there are secondary actions that impact the page.
Title, primary actions, and secondary action#
Use when there are primary page-level actions and secondary actions that impact the page.
Title, breadcrumb, and primary action#
Use for detail pages that have breadcrumbs, and primary actions.
Title, breadcrumb, and secondary action#
Use for detail pages that have breadcrumbs, and a secondary action.
All header elements - Title, breadcrumb, primary actions, secondary action#
Use for detail pages that have breadcrumbs, and secondary and primary actions.