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.

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.

 

For desktop

Take-over for desktop

For mobile

Take-over for mobile