| Table of Contents |
|---|
...
A widget can be placed anywhere on a page.Its location in comparison to other widgets will determine the possible expansion directions (where relevant).
On dashboards, the widgets should be visually distinct from one another and from other elements on screen. The background of such spaces should support that, for examplelay over a grey background:
Content
...
The widget name will be aligned left.
Additional information will be aligned to the widget name, separated by a line separator. It should be short and informative. Avoid presenting a long description that will not be fully presented in various responsive states.
Where space is constrained, the widget name and the additional information will be truncated. The full information (both name and additional information) will be presented in a Tooltip.
Widget controls:
Includes only actions that are related to the widget and NOT content-related (such as expand/collapse, maximize, delete, configure, etc.). Content-related actions will be presented within the content area only.
Actions are presented on hover.
Up to 3 action buttons may be presented. The actions may include:
Icon Buttons, usually used for primary actions.
Action Menu, usually used for secondary actions. Where there are no primary actions, all actions may be presented in the actions menu (without any icon buttons).
...
State | Image |
|---|---|
Regular |  |
Hover |  |
Hover- Draggable |  A frame will be added as a visual indication for draggability |
Active (relevant for draggable widgets only, while being dragged) |  |
Disabled | TBD - graphic design |
Error | - |
Focused | - |
Focused, Hover | - |
Focused, Active | - |
Focused, Disabled | - |
...