Page History
...
The dashboard is the foundational layout shell that other parts of the interface plug into. Within applications, it defines a specialized space for information visualization and control, giving users a structured interface to access key insights and functionalities. Content is laid out on a responsive 2416-column 9-rows grid with fixed spacing to maintain rhythm.
Within Atomic Design, the Dashboard sits at the template level and composes organisms into reusable layouts. These layouts can adapt by breakpoint or format, while the underlying structure remains consistent across views. The Dashboard offers two themes: Astronaut (light) and Tokyo at Night (dark).
[Placeholder: Table giving an overview of major dashboard patterns]
Anatomy
A standard Edge.One Dashboard includes three organisms: Header, Content area, and Navigation panel. Optional components include Floating Sidebar, Overlay, Inline Notification, Toast Notification (in progress), and the Notification Panel (in progress).
...
The header provides access to global actions and is adapted per device to preserve clarity on smaller screens. The layout is consistent across applications.
...
The header container aligns to the content width with side padding of 3.25 rem and a top offset of 2 rem. Header margins are fixed at 1.5 rem.
Header Content
Content of the header is defined by consists of Global Navigation (link). It may include the product logo, icons, and menus. In addition, App Developers can activate or deactivate a breadcrumb navigation and date range picker within the header. All elements have a fixed distance of 2 rem to each other. More information on the header content can be found in Navigation.
Content Area
All content within the content area must follow either the Landscape Grid or the Portrait Grid.
- The landscape grid may only be used on screens where the width is the longer side. For all landscape breakpoints, content must conform to the 2416-column/129-line grid.
- The portrait grid may only be used on screens where the height is the longer side. For portrait breakpoints, the content must conform to the 129-column/2416-line grid.
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. nUse Use this set of standard breakpoints to maintain layout integrity across screen sizes.
| Name | Brakpoint | Width/Height | Colunms/Rows | Padding | Header size |
|---|---|---|---|---|---|
| Kiosk | ≥ 2000px | 4096/variable | 2416/129 | 16/16/72/16 | 72px |
| Web_max | ≥ 1800px | 1920/variable | 2416/129 | 16/16/72/16 | 72px |
| Web_min | ≥ 1200px | 1280/variable | 2416/129 | 16/16/72/16 | 72px |
| Tablet_landscape | ≥ 960px | 1024/variable | 2416/129 | 16/16/72/16 | 72px |
| Tablet_portrait | ≥ 576px | 768/variable | 129/2416 | 16/16/72/16 | 72px |
| Mobil | < 576px | 375/variable | 129/2416 | 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.
...
The inline notification can be used in different ways, depending on the importance of the notification. The content of the notifications can vary within the usage.
- Error NotificationNotification: Collored blue, they signal critical errors.
- Warning Notification: Colored orange, they anounce problems that my result in errors.
- Success Notification: Colored green, they signal a successful process: 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 blueColored blue, they report system information.
Toast Notification
(in progress)
...
Use an overlay to focus attention when displaying dialogs or modals. The overlay follows the dashboard’s 2416-column grid. Dialog and popup sizes depend on content; see Dialog for size guidance.
...
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.
Best Practices
...
Usage
When designing a dashboard, use one of the documented dashboard patterns. If none fits, contact UX to propose a new pattern. It will be reviewed and if appropriate, added to the list of patterns below.
Use the same
...
patterns for similar processes within an application. It ensures a cohesive user experience and predictability for the User.
Content
Order content by the reading order of the users. In the western world, this would be left-to-right, top-to-bottom. Start with more general or abstract information into detail as you move further right and down.
Navigation
Place primary navigation in the left sidebar
...
. Navigation within a task, for example "next" within a multi step process, can be placed within the content area
...
in the form of actions.
For more information, please visit Navigation.
Title
Keep the dashboard titles consise
...
.
Dashboard Patterns Library
...
