...
Initial widget order | After a new widget is added |
|---|---|
  |   |
Interaction
Each widget may include a maximize option to show the content in a larger space such as a Popup or separate page.
Scroll:
Static layout and Customisable auto-layout dashboards should not have a master vertical scroll, where possible.
Customisable manual layout dashboards may have a vertical scroll where there are more rows than can be shown.
Dashboards should never have a horizontal scroll.
...
As the width of a dashboard changes, so will the widths of the individual widgets. Each one should continue to take up the same proportion of the available width.
The widget heights will not respond relative to widget width as the dashboard is narrowed.
All dashboards may have a master vertical scroll below a minimum width.
Dashboards should have additional breakpoints, which may result in additional rows and vertical scroll. For example:
a minimum-width breakpoint, below which all widgets will be shown at full width, regardless of their original size. A vertical scroll will be included.
additional breakpoints where either:
(Auto-layout) the maximum number of widgets permitted on each row is decreased, or
(Manual layout) the proportion of the dashboard width that each widget size uses is automatically increased. For example, S widgets may each increase to 1/2 width, 6 columns.
The spacing between widgets may also be reduced at each breakpoint.
The original widget sizes should always be retained, so the original layout can be restored if the dashboard width is increased above a breakpoint again.
Design
Zeplin link | Screen thumbnail |
|---|---|
 |
Code
...