Versions Compared

Old Version 5

changes.mady.by.user Ron Oemus

Saved on

compared with

New Version Current

changes.mady.by.user Oliver Prudlik

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Jira

Jira
serverJIRA
serverId629409e7-496b-3ea4-89ad-d88e06f91fde
keyGE2-798

Zeplin Styleguide




Zeplin Documentation Layout example 
1ID2 Web max headerhttps://zpl.io/2Zl8LLEcoming soon


Image Added

Basics

The Header Overview is the uppermost section of the EdgeOne/ X-Series App.
The header is firmly anchored and fixed in the upper part. The header moves with the head is fixed while 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.


Table of Contents
outlinetrue


Info
iconfalse
titleZeplin Documentation

here you will find the handover and the Styleguide of this componente:
https://zpl.io/bzZlmM7





Header Definition1920 The header-organism


Header MainComponents

Header Dont's

Wrong is if not all three main components are placed.

Image Removed

Wrong is if the main components are not at your position.

Image Removed

Wrong is if too much content is placed in one of the main components

Image Removed

EdgeOne-Header

Image Removed
Basic/1920_Header_EdgeOne_Components&Spacing

Image Removed
Basic/1920_Header_EdgeOne

X-Series-Header

Image Removed
Basic/1920_Header_X-Series_Components&Spacing

Image Removed
Basic/1920_X-Series_EdgeOne


1920 The header-molecules

Image Added
1920 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 Added1920 Astronaut theme

Image Added
1920 Tokyo 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
1920 EgdeOne header-atoms

Image Added1920 X-series header-atoms

Image Added1920 EdgeOne astronaut header

Image Added
1920 X-series astronaut header

Header Breakpoints