Page History
...
- The landscape grid may only be used on screens where the width is the longer side. For all landscape breakpoints, such as Desktop Min and Max and Tablet, content must conform to the 24-column/12-line grid.
- The portrait grid may only be used on screens where the height is the longer side. For portrait breakpoints such as tablet and mobile, the content must conform to the 12-column/24-line grid. The Portrait Grid may have different spacings on the right and left depending on the breakpoint. Within the grid, the content is not positioned freely. Start content blocks, for example, boardlets, at the top-left and place them along the grid. Grid cells should generally all be filled within a finished dashboard. The dashboard content container has fixed side and bottom padding; nested content, for example nested boardlets, may scroll within their own area.
Breakpoints
The grid defines five six breakpoints that control columns, header layout, margins, gutters, and icon sizes. On smaller viewports, compress or stack headings and labels to preserve readability.nUse this set of standard breakpoints to maintain layout integrity across screen sizes.[Image]
| Name | Brakpoint | Width/Height | Colunms/Rows | Padding | Header size |
|---|---|---|---|---|---|
| Kiosk | ≥ 2000px | 4096/variable | 24/12 | 16/16/72/16 | 72px |
| Web_max | ≥ 1800px | 1920/variable | 24/12 | 16/16/72/16 | 72px |
| Web_min | ≥ 1200px | 1280/variable | 24/12 | 16/16/72/16 | 72px |
| Tablet_landscape | ≥ 960px | 1024/variable | 24/12 | 16/16/72/16 | 72px |
| Tablet_portrait | ≥ 576px | 768/variable | 12/24 | 16/16/72/16 | 72px |
| Mobil | < 576px | 375/variable | 12/24 | 8/8/64/8 | 64px |
Navigation
This section will only give a brief overview. For more information on navigation within and between dashboards, please visit Navigation (link).
Navigation Panel
The Navigation navigation panel sits in the left sidebar and contains navigation components only. These include internal dashboards and approved third-party links. Using fixed navigation molecules keeps the sidebar consistent across applications. The content of the 1st level and 2nd level can vary.
[Image, Table]
Dismissing Left Sidebar
...
- x: Clicking the close x icon in the upper left will close the Sidebar.
Floating Sidebar
(wipin progress)
Notifications
(wip)For more information, go to [Notification].
Navigation Panel
The Notification Panel is located within the right sidebar. It hosts only communication organisms, as well as add on in the form of widgets.
[Image, Tabel]
Inline Notification
...
- Error Notification: Inline notifications have an optimal link action that is adjacent to the title and the body content. Error notifications have a red color that the user can immediately see the difference in the notification.
- System Notification: System notifications are colored blue.
Toast Notification
(wipin progress)
Overlay
Use an overlay to focus attention when displaying dialogs or modals. The overlay follows the dashboard’s 24-column grid. Dialog and popup sizes depend on content; see Dialog for size guidance.
[Image]
Currently the overlay can be used for these applications:
...
The Dialog follows the column-grid of the Overlay. The size and dimensions of the Dialog depend on the size of the content. More on this topic in the Dialog pattern(link to Dialog).
Popup Overlay (Modal)
The Popup is best suited for entry or information modules. These modules adapt to the column grid of the Overlay. The dimensions of the Popup depend on the content. More on this topic in the Dialog pattern (link to Dialog).
Best Practices
...
