Page History
...
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. Nested content, for example content nested in boardlets, may scroll within their own area.
Breakpoints
The grid defines six breakpoints that control columns, header layout, margins, gutters, and icon sizes. On smaller viewports, compress or stack headings and labels to preserve readability. Use this set of standard breakpoints to maintain layout integrity across screen sizes.
| Name | Breakpoint | Width/Height | Columns/Rows | Padding | Header size |
|---|---|---|---|---|---|
| Kiosk | ≥ 2000px | 4096/variable | 16/9 | 16/16/72/16 | 72px |
| Web_max | ≥ 1800px | 1920/variable | 16/9 | 16/16/72/16 | 72px |
| Web_min | ≥ 1200px | 1280/variable | 16/9 | 16/16/72/16 | 72px |
| Tablet_landscape | ≥ 960px | 1024/variable | 16/9 | 16/16/72/16 | 72px |
| Tablet_portrait | ≥ 576px | 768/variable | 9/16 | 16/16/72/16 | 72px |
| MobilMobile | < 576px | 375/variable | 9/16 | 8/8/64/8 | 64px |
...
Notifications are ordered and grouped by their date of appearance, regardless of the active tab. Selecting a notification opens a detail panel to the left with basic information about the notification.
Global Notifications
...
The Modal is best suited for information modules. The dimensions of the Modl Modal depend on the content. More on this topic in the Dialog pattern.
...
These patterns collectively form a harmonious ecosystem, ensuring consistency, accessibility, and flexibility throughout the design system.
Home Dashboard
It acts as the epicenter of your application development experience, providing an instant snapshot of essential metrics and insights. Users gain immediate visibility into the performance and status of existing applications, streamlining decision-making and project management.
Application Library
The library rovides a clear overview of all active items in the application. A table lists each item, and a left-hand panel surfaces key metrics. Users can monitor status, edit items, or open a detailed view.
Application Overview
It opens from the Library to focus on a single item. A right-hand details panel shows detailed information on the item. Users can review changes, adjust settings, or navigate to deeper views.
Task Management Dashboard - Kanban View
This dashboard functions as an overview of tasks with key metrics within the application. Tasks are grouped by application relevant attributed for clarity. The progress of each task is clearly displayed. Users gain an insight on the status of tasks, potential problems and the overall status of the process.
Content Editor
Two toolbars frame the content preview and provide editing controls. Users can edit the content here, then use the top toggle to switch between editing and previewing the result.
