Table of contents
| Units | |
|---|---|
| Grid Columns | 24 |
| Base | px | rem |
|---|---|---|
| Breakpoint | ≥1800px | n.n |
| Width | 1920 | 120 |
| Height | 928 | 58 |
| Content Area | ||
| Column Width | 78 | 4.875 |
| Margin left | 24 | 1,5 |
| Margin right | 24 | 1,5 |
| Marin bottom | 16 | 1 |
| Header Area | ||
| Header | 72 | 9 |
| Icon max | 24 | 1,5 |
The 24 Columns Gutter.
Gutters may be missing as shown above or present as shown below. For closely related content, you should consider an Gutters free layout. Use the gutter if the content requires more separation.
| Unit | rem | |
|---|---|---|
| Indent left | 24 | 1,5 |
| Indent right | 24 | 1,5 |
| Margin left | 24 | 1,5 |
| Margin right | 24 | 1,5 |
| Marin bottom | 16 | 1 |
| Units | |
|---|---|
| Grid rows | 12 |
Different assets within the design kit have different heights. Basic, Small, Medium and Large. These sizes have fixed dimensions indicated in rows.
| Row | px | rem | |
|---|---|---|---|
| §row-01 | basic | 24 | 1,5 |
| §row-02 | Small | 40 | 2,5 |
| §row-03 | Medium | 56 | 3,5 |
| §row-04 | Large | 72 | 4,5 |
Common dashboard with 4 Boardlets aligned to the 24 columns grid/12 rows
Common dashboard with 10 Boardlets aligned to the 24 columns grid/ 12 rows
Common dashboard with Boardlets, Cards and Free-standing-content (aligned to the gutter)
- ID3 - Default Boardlets
Zeplin Styleguide
Card Zeplin Documentation Layout example 1 ID3 Boardlet coming soon - ID3 Boardlet Tab
- ID3 Preset Boardlets
Zeplin Styleguide
Boardlets Zeplin Documentation Layout example 1 ID3 DSFM Newsboardlet https://zpl.io/adlWrNR coming soon - ID3 Dialog
Jira
GE2-807 - Getting issue details... STATUS
- ID3 Modal
Zeplin Styleguide
Modal Zeplin Documentation Layout example 1 ID3 passive modal https://zpl.io/29X6gXY coming soon - ID3 Card
Jira
GE2-695 - Getting issue details... STATUS
Zeplin Styleguide
- Discussion about tabs/ decision necessary
Within the boardlets a decision is necessary. Currently there is no uniform decision how the tabs inside the boardlets should look and work. On this page you can see different suggestions of tabs with advantages and disadvantages.
Layout 1 (UI/UX 1.Favorit)
Tabs at the bottom of the boardlet.
- ID Cockpit Boardlet
- Usage Overflow Menu
Overflow menu is used when additional options are available to the user and there is a space constraint.
The overflow menus are divided into Dashboard Overflow Menus and Boardlet Overflow Menus.
Since the this menus in these two areas differ greatly in their structure. - Style Overflow Menu
Style can be found here: https://zpl.io/bPkYw8k
