Having consistent and familiar headers throughout an experience is critical, it assists in providing our customers context and confidence in the experience they are in.
Header
User experience
Headers provide a reliable place to house navigation and, when required, access to other key features, ie Sign in/out. The brand identity is not only used for recognition, but serves as a ‘home’ button when the user needs an ‘escape’ from whatever environment they are in. At the smaller breakpoints the header also houses access to the Menu.
Visual design
The Header components is a basic, configurable component used to hold global elements such as logos and navigation. As with all the GEL UI components they are intentionally designed to be subtle and understated so as not to detract from the content. When the header is fixed a drop shadow is applied when content scrolls below the header.
The Header component is designed to be responsive and multi-brand. This ensures that all branding etc will automatically be the correct size and position when the brand is switched.
Where is this available?
The GEL design System will always have the latest component versions and additions, however new components and changes to existing components may roll out to other platforms at different times.