Page Header
Page headers provide a consistent user experience at the top of most page types in the system. In addition to the page title, a page header may contain a description and other static and interactive elements. Elements are arranged and display according to the context of the page.
Section titled “ Design”Left Container
Page title
Description content
Right Container
Buttons, containers, text, etc…
In Practice
Section titled “ In Practice”- The page header displays full width at the top of the page.
- The only required element is a page title.
- Any content in the right container stacks below the left container content at smaller break points.
Left container
Section titled “Left container”- Contains the page title (H1).
- The title wraps when the text is too lengthy.
- When there is a help article for the page, place it under the page title as a link.
Right container
Section titled “Right container”- Can contain information and other items such as buttons, button groups, links, and cards.
- Limit these to elements that pertain to the entire page.
Accessibility
Section titled “ Accessibility”Screen reader support
Section titled “Screen reader support”- Be sure to define ARIA labels.
- Provide keyboard functionality to all available elements.
Follow the accessibility guidelines for each component found in the alert. View guidelines