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 - Mobile Header > Basic-1920_Header_definition.png
1920 The header-organism

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

Inspire Design Guidelines > ID2 - Mobile 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

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 - Mobile Header > Basic-375_def_Header_Astronaut.png
375 header-atoms-spacing

Inspire Design Guidelines > ID2 - Mobile Header > Basic-375_Header_Astronaut.png
375 Astronaut theme

Inspire Design Guidelines > ID2 - Mobile Header > Basic-375_Header_TaN.png
375 Tokyo at night theme