Basics

The header is firmly anchored and fixed in the upper part. The head moves with scrolling, so that all functions are visible and selectable. The header-Organism always consists of 3 molecules.

1. Navigation molecules,

2. Logo molecules

3. Toolbar molecules.



here you will find the handover and the Styleguide of this componente:
https://zpl.io/bzZlmM7





The header-organism


The header-molecules


The header-atoms




Header breakpoints

All Headers are divided into different breakpoints. The breakpoints define the visual division and distance of organisms, molecules and atoms from each other in all possible digital formats. This UI design kit considers the Web_Max breakpoint as default, all other breakpoints are located in the category subcategories.

Kiosk Header
Web_Max Header
Web_Min Header
Tablet Header
Mobile Header




Header theming

All molecules and atoms of the Header exist in two themes, the Astronaut(light) and the Tokyo at Night Theme(dark).


Astronaut theme


Tokyo at night theme



Header variation inside EgdeOne and X-Series

The atoms of each molecule may differ within the X-Series and EdgeOne.



The EgdeOne header-atoms

The X-Series header-atoms

EdgeOne Astronaut Header


X-Series Astronaut Header