Basics

The basic framework of the dashboard consists of a header and the content area. Within the content area are the boardlets. All content is based on the 24 Colum-Grid.


The 24 Colum-Grid

The foundation of the design system is the modified bootstrap frontend grid. this grid has 24 columns within the dashboard and 12 columns within the boardlets. The dashboard is divided into two parts, header and content area. The 24 Columns Grid only applies within the content area. The grid has no column space, all distances are solved via the margin.


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


coming soon


Dashboard Spacing


Base

1920 px

1920 rem

Breakpoint≥1800pxn.n
Width1920120
Height108067.5
Content Area

Columns24-
Column Width784.875
Gutter261.625
Margin241,5
Header Area

Header241,5
Icon max241,5





Basic Components of the Dashboard



1920/Dashboard_Headerspacing

EdgeOne Dashboard

The EdgeOne Dashboard always consists of a header and the content area. The content area can be freely designed, all content must adhere to the 24 grid column. In the header, burgers, datepicker, logo and setting are obligatory. More information about the header can be found here: ID2 - Header


1920/Dashboard_EdgeOne_Astronaut


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


1920/Dashboard_EdgeOne_Tokyo-at-Night


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



X-Series Dashboard

The X-Series dashboard always consists of a header and the content area. The content area can be designed freely, all content must adhere to the 24 grid column. In the header are burger, datepicker, logo and setting obligatory. More information about the header can be found here: ID2 - Header




1920/Dashboard_X-Series_Astronaut



1920/Dashboard_X-Series_Tokyo-at-Night