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

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

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

Inspire Design Guidelines > ID2 - Tablet Header > Basic-1024_Header_def_Astronaut.png
1024 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 - Tablet Header > Basic-1024_Header_Astronaut.png
1024 Astronaut theme

Inspire Design Guidelines > ID2 - Tablet Header > Basic-1024_Header_TaN.png
1024 Tokyo at night theme