View Source

Zeplin Styleguide

		Zeplin Documentation	Layout example
1	ID2 Overlay	https://zpl.io/VxNorYW	coming soon

Inspire Design Guidelines > ID2 - Overlay > Components D2 Overlay.png

The overlay serves as a focus aid for all components that are to be lifted from the dashboard. The overlay also has a column grid/row, this grid is the same to the Dashbord Column Grid.

Currently the overlay can be used for these applications:

Basic Overlay

Inspire Design Guidelines > ID2 - Overlay > Basic-1920_Basic_Overlay_Definition.png
1920 Basic Overlay definition

Astronaut: https://zpl.io/b6d0Y8R

Tokyo at Night: soon

Inspire Design Guidelines > ID2 - Overlay > Basic-1920_Basic_Overlay.png
1920 Basic Astronaut Overlay

Inspire Design Guidelines > ID2 - Overlay > 1920_Overlay.png
1920 Basic Tokyo Overlay

Dialog Overlay

Der Dialog passt sich an den Column-Grid des Overlays an. Welche Dimensionen der Dialog besitzt ist vom unterschiedlichen Inhalt abhängig. Mehr darüber erfahren Sie im Thema Dialog.

Inspire Design Guidelines > ID2 - Overlay > Basic-1920_Dialog_Overlay_Definition.png
1920 Dialog Overlay definition

Astronaut: https://zpl.io/VQX5AvP

Tokyo at Night: soon

Inspire Design Guidelines > ID2 - Overlay > Basic-1920_Overlay.png
1920 Astronaut Dialog Overlay

Inspire Design Guidelines > ID2 - Overlay > 1920_Overlay – Dialog.png
1920 Tokyo at Night Dialog Overlay

Popup Overlay

Als Popup eignen sich alle möglichen Informations-Module oder Eingabe-Module. Das Modul passt sich an den Column-Grid des Overlays an. Welche Dimensionen das Modul besitzt ist vom unterschiedlichen Inhalt abhängig. Mehr darüber erfahren Sie im Thema Modul.

Inspire Design Guidelines > ID2 - Overlay > Basic-1920_Overlay_Definition – 1.png
1920 Popup Overlay definition

Astronaut: https://zpl.io/2pGJrvN

Tokyo at Night: soon

Inspire Design Guidelines > ID2 - Overlay > Basic-1920_Overlay – 1.png
1920 Astronaut Popup Overlay

Inspire Design Guidelines > ID2 - Overlay > 1920_Overlay Popup.png
1920 Tokyo at Night Popup Overlay