Page Header
Page Header surfaces page actions and metadata for an additional layer of hierarchy.
Anatomy
- Status Indicator(Optional): Indicator for reflecting the overall purpose of the page.
- Header: Headline that further clarifies the purpose of the page.
- Trailing Icon Buttons (Optional): Reserved area for actions pertaining to the page that uses Tertiary Icon Only Buttons.
- Container: Houses text and actions.
- Leading Element (Optional): Avatar or accent icon.
- Subtext (Optional): Text area for metadata related to the header.
- Body (Optional): Text area for further clarifying metadata.
Usage Guidance
When to Use
- Use Page Header to surface additional information or metadata about a page.
- Use Page Header to create an additional layer of actions that can be completed in an experience outside of the global header and action area in the Top App Bar.
When to Consider Something Else
- Consider using Top App Bar for headers and actions that apply globally across multiple pages of a product area or experience.
Behaviors
Pressed State
The Trailing Icon Buttons in Page Header support standard pressed states for Tertiary Buttons.
Truncation
The Page Header does not support truncation in order to display all information available to users. Header, Subtext, and Body text should be kept as short and concise as possible to avoid occupying too much screen real estate. Consider that since text is responsive to dynamic type sizes determined by the user’s operating system, text can have more overflow than initially mocked.
Action Overflow
When there are more than two actions within a Page Header, all actions are accessed under a related actions icon button via Menu.
Scrolling
The Page Header should always disappear on scroll. When the trailing actions are no longer visible, they should be assumed into the Top App Bar.
The Page Header actions absorbed into the Top App Bar should be separated via a divider in Menu from any trailing icons in the Top App Bar.
Banners
When an Alert or Error Banner is called, it should always surface beneath the Top App Bar and above the Page Header. Here, the color fill of the Banner should be assumed in the Top App Bar but not the Page Header which is intended to blend with the rest of the experience.
Component Hierarchy
Page Header should always appear beneath the Top App Bar and any of its content, including the additional content slot. Page Headers, however, may appear either above or below Tabs depending on what is most appropriate for the hierarchy of the specific experience. Placement of the Page Header above Tabs makes the Page Header persist across the experience. Placement beneath Tabs limits Page Header content to applying only to a specific Tab.
Default Fill
Page Header should always assume the same background fill as the rest of the page to enhance cohesion and openness in our experiences.
Do
Match the fill color of the page in Page Header.
Don't
Use a unique fill color in Page Header; it creates a fragmented and disjointed visual experience.
Examples
Leading Elements
The Page Header supports Avatars and Accent Icons as leading elements for Bespoke implementations outside of MAX.
Component API
Coming soon
Accessibility Guidelines
Coming soon
Content Guidelines
When writing content for Page Header, please refer to the Headings, Subheadings, and Titles section of Content’s UI Text recommendations.
Anatomy
- Status Indicator(Optional): Indicator for reflecting the overall purpose of the page.
- Header: Headline that further clarifies the purpose of the page.
- Trailing Icon Buttons (Optional): Reserved area for actions pertaining to the page that uses Tertiary Icon Only Buttons.
- Container: Houses text and actions.
- Leading Element (Optional): Avatar or accent icon.
- Subtext (Optional): Text area for metadata related to the header.
- Body (Optional): Text area for further clarifying metadata.
Usage Guidance
When to Use
- Use Page Header to surface additional information or metadata about a page.
- Use Page Header to create an additional layer of actions that can be completed in an experience outside of the global header and action area in the Top App Bar.
When to Consider Something Else
- Consider using Top App Bar for headers and actions that apply globally across multiple pages of a product area or experience.
Behaviors
Pressed State
The Trailing Icon Buttons in Page Header support standard pressed states for Tertiary Buttons.
Truncation
The Page Header does not support truncation in order to display all information available to users. Header, Subtext, and Body text should be kept as short and concise as possible to avoid occupying too much screen real estate. Consider that since text is responsive to dynamic type sizes determined by the user’s operating system, text can have more overflow than initially mocked.
Action Overflow
When there are more than two actions within a Page Header, all actions are accessed under a related actions icon button via Menu.
Scrolling
The Page Header should always disappear on scroll. When the trailing actions are no longer visible, they should be assumed into the Top App Bar.
The Page Header actions absorbed into the Top App Bar should be separated via a divider in Menu from any trailing icons in the Top App Bar.
Banners
When an Alert or Error Banner is called, it should always surface beneath the Top App Bar and above the Page Header. Here, the color fill of the Banner should be assumed in the Top App Bar but not the Page Header which is intended to blend with the rest of the experience.
Component Hierarchy
Page Header should always appear beneath the Top App Bar and any of its content, including the additional content slot. Page Headers, however, may appear either above or below Tabs depending on what is most appropriate for the hierarchy of the specific experience. Placement of the Page Header above Tabs makes the Page Header persist across the experience. Placement beneath Tabs limits Page Header content to applying only to a specific Tab.
Default Fill
Page Header should always assume the same background fill as the rest of the page to enhance cohesion and openness in our experiences.
Do
Match the fill color of the page in Page Header.
Don't
Use a unique fill color in Page Header; it creates a fragmented and disjointed visual experience.
Examples
Leading Elements
The Page Header supports Avatars and Accent Icons as leading elements for Bespoke implementations outside of MAX.
Component API
Coming soon
Accessibility Guidelines
Coming soon
Content Guidelines
When writing content for Page Header, please refer to the Headings, Subheadings, and Titles section of Content’s UI Text recommendations.
Can't Find What You Need?
Check out our FAQ section which may help you find the information you're looking for. For further information, contact the #ask-canvas-design or #ask-canvas-kitchannels on Slack.