| Table of Contents | ||||
|---|---|---|---|---|
|
...
Customisable, manual layout
Width
The widget dashboard should use a consistent grid of 12 columns.
Widgets can be displayed in the sizes below.
XXS : 1/6 width (2 columns) (half height)
XS : 1/4 width (3 columns)
S : 1/3 width (4 columns)
M : 1/2 width (6 columns)
L : 2/3 width (8 columns)
XL : 3/4 width (9 columns)
XXL : full width (12 columns)
Sizes are optional; a dashboard may offer only a subset of these options.
...
Height
All rows should be the same fixed height.
Two XXS half-height widgets may be stacked on top of one another within a single row.
The height of full-width widgets may respond to the widget content.
...
The size of each individual widget can be set both before and after it is added to the dashboard.
Each widget will have a default size, depending on its content.
Particular sizes may be prohibited for individual widgets. For example, it may not be appropriate to create an XS widget containing a large chart or table.
Expand/collapsex
Expand/collapse may only be used for widgets in Static Layout dashboards, where the reactive behaviour of the remaining widgets can be pre-defined.
It may not be used for widgets within Customisable dashboards.
Transitions
A transition effect should be used when:
adding or removing widgets from the dashboard.
moving widgets using drag and drop.
...
anything other than Widgets within dashboards.
scroll within widgets, where possible. Instead:
make sure the sizing is appropriate for widgets which contain a lot of data.
limit the content shown, and include an option to show the full content in a larger space such as a Popup or separate page.
both a whole page scroll and scroll within widgets on the same dashboard.
for standard page layouts where the sections are not standalone interfaces.
expand/collapse for dashboard widgets in customisable dashboards.
Accessibility compliance
Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.
...