View Source

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.

Inspire Design Guidelines > ID2 - Web Min Header > Basic-1920_Header_definition.png 1920 The header-organism

Inspire Design Guidelines > ID2 - Web Min Header > Basic-1920_Header_MainComponents.png 1920 The header-molecules

Inspire Design Guidelines > ID2 - Web Min Header > Basic-1920_Header_EdgeOne_Definition.png 1920 The header-atoms

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

Header spacing

The Web Min header differs from the Web Max header in the spacing between the atoms.

Inspire Design Guidelines > ID2 - Web Min Header > Basic-1280_Header_def_Astronaut.png
1280 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).

Inspire Design Guidelines > ID2 - Web Min Header > Basic-1280_Header_Astronaut.png
1280 Astronaut theme

Inspire Design Guidelines > ID2 - Web Min Header > Basic-1280_Header_TaN.png
1280 Tokyo at night theme