*This site is a work-in-progress and some pages are more complete than others. If you have any questions or issues, please email nick.harris@reckitt.com. *
Global Header block
- Nick Harris
Usage | Anatomy | Visual style | Editorial | Behaviour | Accessibility | Related components
The Global Header is the key branding and navigational device that allows users to quickly understand where they are and the content that the site offers.
Usage
Do’s
Use Header when you have a web page as part of a standard site (there are very few exceptions)
Dont’s
Don’t use Header when there are political (e.g. cobranding or regulatory) justifications. In this instance, override the page with an alternative header (either simple header or no header).
Anatomy
Insert image here
| Item | Component type | Content type | Notes |
|---|---|---|---|---|
1 | Logo | Image | Text |
|
2 | Navigation links | Link | Text |
|
3 | Skip link | Link | Text |
|
Visual style
The Global Header comes in two mode to work with light and dark backgrounds: default, inverse.
On smaller screens the Global Header will collapse into a hidden menu accessed via a hamburger menu.
Editorial
…
Behaviour
n/a
Accessibility
Related components