Internet Explorer is not supported by Design Library

The last version of Internet Explorer, version 11, was released on October 17, 2013. This is a very long time ago when taking into account the rapid development of web technologies. These days it is often difficult and time consuming to get modern technologies to work well in this old browser. More and more frameworks are dropping support, and even Microsoft themselves has announced that they will fully drop support for IE in their own services in 2021.

Consequently, we have decided to not include support for IE in the Design Library website.

Luckily, there are modern options in active development. Please use Firefox, Edge or Chrome instead.

Widget

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

Guidelines

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.

Behaviour

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

Examples

Widget 03

Specification

Specification

Related patterns & components

Page last updated

Feedback

Was this page helpful?