A widget acts as a configurable preview for a module and/or page.

Short description

A widget consists mostly of information derived from the module it is connected to; for example, how a specific fund is progressing. It can also be used as a placeholder for standalone tools, such as a loan calculator.

When and how to use it

Complexity is not the true nature of a widget, it should instead aim to be simple and offer glanceability that encourages exploration.

Use it to show a specific hero number or few rows from a lengthy table from the parenting module. It could be latest three account transactions or the current account balance.


Depending on size (S/M/L), a widget accommodates a few or no content areas (applies to small sized). A medium sized widget contains one content area which can be held by a table/graph/list or hero number, whilst a large sized widget holds two content areas.

The widget itself can be added, removed, customised and/or reordered in a page.

Errors should be contextual and affect the whole widget or a specific value. The error area should override the default behaviour of a row and show the actual message if clicked upon.

Do's and don'ts


  • Show a narrow selection of information
  • Show contextual actions
  • Be specific and contextual if the widget requires attention from a user


  • Try to not overcrowd the widget with information, less is more


Widget 03






Component: Card (container)