...

• 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 widgets in customisable dashboards.

Accessibility compliance

Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.

...

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

• Static layout and Customisable auto-layout All dashboards may have a master vertical scroll below a minimum heightwidth.

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

...