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
Current active theme is Sainsbury's. You can see all developer documentation on our Fable Storybook site.
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.
Do
Use the header component to show a heading to describe the current view.
Don't
Don’t overcrowd the header component with too many actions or information.
Do
Use the header component to hold primary actions.
Don't
Don’t nest the header component too deeply and restrict its available space.
Do
Use the header component at a visual high position at full width.
Don't
Don’t add large amounts of content or long headings. Aim for headings that are short and concise.
Was this page helpful?
Get in touch
Our team can answer any questions about using accordions or give you a helping hand with your next project.
---