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.

Take-over

Takeover modals enable a user to focus on a specific task while having the ability to go back to their previous view quickly.

Guidelines

Short description

A full screen modal that temporary blocks interaction with the main view of a site and set the actual task in focus.

Take-over

When and how to use it

Use a takeover modal when a task needs the full attention from a user, for example when making a payment. Heavier tasks such as a multi step wizard also benefit from the focused experience of removing not needed UI chrome of the original site.

Behaviour

  • It should cover the whole viewport whilst its own content is centered, both vertically and horizontally.
  • If triggered from a link/button, the modal should originate from that point until filling the whole viewport to communicate hierarchy.

Button placement

This example is from an centered empty state message (hybrid) where the primary button is placed to the right.

Specification

Specification

Take-over for desktop

Take-over for mobile

Subsections

Related patterns & components

Page last updated

Feedback

Was this helpful?