Header
The header is a block of designated space for labelling the currently viewed context as well as providing primary actions.
On this page
How to use the header
The header makes the most important parts of your experience easy for users to find.
- Always place it at the top of the page
- Use the ARIA landmark role to help screen reader users find and understand the header and header navigation elements
- The header component supports text resize, but you should still test with large text sizes in the browser
Content guidelines
Labels in the header should start with a capital letter and be in sentence case, unless they are a brand name.
You can use an ampersand (&) in place of the word ‘and’ to reduce characters.
Use the header component to show a heading to describe the current view.
Don’t overcrowd the header component with too many actions or information.
Use the header component to hold primary actions.
Don’t nest the header component too deeply and restrict its available space.
Use the header component at a visual high position at full width.
Don’t add large amounts of content or long headings. Aim for headings that are short and concise.