...

A widget is a self-contained entity that is designed to work within a certain wider workspace.

...

Usage & Behavior

General guidelines

Structure

A widget consists of:

• Header, which includes:

  • Widget name, with

...

• • or without additional information. (In some cases, this may be replaced by Tabs. See Internal Logic below.)

  • Actions area, including Icon Buttons (optional) and an Action Menu.

• Content area

Placement and Positioning

• A widget can be placed anywhere in on a page.
  Its location in comparison to other widgets will determine the possible expansion directions (when where relevant).

• In 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 example:
  

  

Content

...

• Widget The widget name is will be aligned left.

• Additional information is 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 to its full under in various responsive states.

• When Where space is constrained, the widget name and the additional information will be truncated. The full information (both name + infoand additional information) will be presented in tooltipa Tooltip.

• Action buttons:

  • Includes only actions that are related to the widget -related and NOT content-related (e.g. such as expand/collapse widget, maximize widget, delete widget, configure widget, etc.). Content-related actions will be presented within the content area only.

  • Actions are presented in on hover.

  • Up to 3 action buttons may be presented. The actions may include (1) :

    • Icon Buttons, usually

    being

    • used for primary actions

    (2)

    • .

    • Action Menu, usually

    being

    • used for secondary actions.

    
    All

    • Where there are no primary actions, all actions may be presented in the actions menu (without any icon buttons)

    , especially when there are no primary actions:

    • .

      Image Modified

Internal Logic

• Tabbed Widget: multiple . Different content types can be gathered under a single widget, using tabs Tabs.

  Image Removed

  • The tabs replace the widget header and the additional information.

  • The action button buttons refer to the widget as a hole whole (all 3 tabs together).

    Image Added

• Configuration: widget . Widget configurations, such as resizing or moving location change or resizing, should be saved per user for future sessions.

...

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	-

Interaction

• (optional) expand Expand or collapse of widgets a widget can be done by clicking a button in the action buttons area.
  The widget will be collapsed and expanded in using an animation.
  

  

• (optional) dragDrag:

  Image Removed

  • Hover Hovering over the widget will change the widget to ‘hoverthe hover-draggable’ draggable state.

  • Hover Hovering over the header area will change the mouse cursor to a dragging state.

  • The user can click-and-hold to drag the widget to a new location. (see See Drag and Drop for more infoinformation).

    Image Added

  • A drag handle may also be presented in on hover:

    

• (optional) resize: hovering Resize. Hovering over the boundaries of the widget will can allow the user to resize it horizontally/ , vertically/ , or diagonally.

  Image Removed

  • In On hover:

    • The mouse cursor will change to drag horizontally/, vertically/, or diagonally.

    • The boundary line will be visually presented as resizable.

    • The hover and resize area should be at list 6 pixels wide.

  • Click-and-hold while changing the mouse location will resize the widget.

    Image Added

Validations and errors

The content of the widget may have an empty state and a loading state.

See relevant pages for more info.

Transitions

Expand and collapse will be in animationanimated.

Best practices

Use:

• In dashboards.

• When the entity should be configurable in size and location.

Don’t use:

• When the entity is not self-contained, and doesn’t stand by it’s on its own.

• As a single widget in a page.

Accessibility compliance

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

Design

...