Page History

Basics

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

1. the navigation componentNavigation molecules,

2. Logo molecules

3. Toolbar molecules the logo component and 3. the toolbar component. The contents of the individual components may differ within the X-Series and EdgeOne.

Header Definition

Image Removed
Header MainComponents

Header breakpoints

Header theming

The header-organism

Image Added
The header-molecules

Image Added
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).

Image AddedAstronaut theme

Image Added

Image Removed
Basic/1920_Header_EdgeOne_Components&Spacing

Image Removed
Basic/1920_Header_EdgeOneTokyo at night theme

Header variation inside EgdeOne and X-Series

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

Image Added
The EgdeOne header-atoms

Image AddedThe X-Series header-atoms

Image AddedEdgeOne Astronaut Header

Image Added
X-Series Astronaut Header

Image Removed
Basic/1920_Header_X-Series_Components&Spacing

Image Removed
Basic/1920_X-Series_EdgeOne