Page History
...
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 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
...
