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.



1920 The header-organism


1920 The header-molecules


1920 The header-atoms

Important, Attention!

To explain the single template, organism, molecule or atom, this design kit uses the Web Max(1920) Breakpoint.





Header spacing

The mobile header differs from the standard header within the icon atoms, in the spacing between the atoms and the atoms inside the molecule.

1. all icons within the mobile breakpoint have a size of 48px. This is necessary because the input via finger needs a larger area.

2. the spacing between the atoms is much smaller because the icon atoms are larger and have a different padding.

3. the navigation molecule consists only of one burger. The logo molecule is placed in the left area. The toolbar molecule consists of fewer atoms(2 icons atoms max).

All these points are necessary because the user behaviour within the mobile breakpoint is different.


375 header-atoms-spacing






Header theming

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




375 Astronaut theme


375 Tokyo at night theme


  • No labels