You are viewing an old version of this page. View the current version.

Compare with Current View Page History

Version 1 Next »

(this page was created automatically. In case of formatting issues, please visit the official Wiki Page)

Dashboard

Overview

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 24-column 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).

Anatomy

A standard Edge.One Dashboard includes three organisms: Header, Content area, and Navigation panel. Optional components include:

  • Floating Sidebar
  • Overlay
  • Inline Notification (link to component)
  • Toast Notification (in progress)
  • and the Notification Panel (in progress)

[Imgae]

Header

The header provides access to global actions and is adapted per device to preserve clarity on smaller screens. The layout is consistent across applications.

Header Box

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.

[Image]

Header Content

Content of the header is defined by Global Navigation (link). It may include the product logo, icons, and menus. All elements have a fixed distance of 2 rem to each other. More information on the header content can be found in Navigation.

[Image]

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, 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 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]

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 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

There are several possible ways to exit the basic left Sidebar.

  • x: Clicking the close x icon in the upper left will close the Sidebar.
  • Esc: Press ESC on the keyboard
  • Click: Click into the non-sidebar content

There are only one possible way to exit the anchored left Sidebar.

  • x: Clicking the close x icon in the upper left will close the Sidebar.

Floating Sidebar

(wip)

Notifications

(wip)

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

For more information on the component: [Inline Notification].(https://e1-dev.k8s.myapp.de/edgeone-wiki/inspire-design-system-v2/feedback/inline_notification.html)

The inline notification organism consists of 3 molecules and one atom: Notification indicator, Notification, Actionbar, Container with shadow. It is exclusively played under the Header and is animated to come down when entering. The Notification can be removed with an Action Icon "close".

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 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

(wip)

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:

Dialog Overlay

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

  • Use one of the documented dashboard patterns. If none fits, contact UX to propose a new pattern.
  • Place primary navigation in the left sidebar; place task-internal steps within the content area. More information can be found in Navigation.
  • Follow left-to-right, top-to-bottom reading order when arranging content.

Dashboard Patterns Library

Dashboard patterns inside Inspire are strategically crafted interfaces that cater to various user needs and interactions. From the central hub of the Home Dashboard to the detailed exploration in Application Overview, each pattern serves a unique purpose, providing users with intuitive navigation, comprehensive insights, and customisation capabilities.

These patterns collectively form a harmonious ecosystem, ensuring consistency, accessibility, and flexibility throughout the design system.

Home Dashboard

It acts as the epicentre 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.

  • No labels