Short description

A centered modal appears in the centre of the screen and usually overlays the existing content. It is positioned in the middle, with the background content dimmed to bring focus to the modal.

Centered modals are useful when you want to capture the user's attention and focus solely on the modal's content. They work well for tasks that require user input, confirmation, or displaying critical information.

When and how to use it

Use this type of modal when you want the modal to be in full focus for user interaction or attention.

Behaviour

It's displayed in the centre of the screen. Its content should only scroll vertically. The modal is always full take-over when it’s a mobile viewport.

Closing a modal

A modal can be closed in multiple ways depending on context.

• Clicking the close button in the upper right corner.
• Clicking outside the modal (possible to disable for critical flows)
• Clicking an explicit cancel or close button inside the content of the modal.
• Pressing ESC on the keyboard.

Sometimes you may want to stop involuntary closing of the modal. This is especially important if users have filled in information in a form and risks to loose data. A dialog may be triggered to confirm that the user did want to close and is aware of the consequences.

Placement

It’s displayed in the centre of the screen. If the modal doesn't fit, it shrinks with the screen leaving only a 32px margin with the overlay surrounding the modal.

Centered modal

Resizing behaviour

Example for Payments

Do's and don'ts

Do

• Use the centered modal when you need the user’s full attention.
• Design the content of the modal to be responsive to the screen size. 

Don't

• Use the centered modal when users should be able to get a context of the page underneath the modal.

-

Make sure the modal is announced and that the tabbing-order stays inside the modal (you need to close it before tabbing to other items on the page).

General specification

• Details: Specification
• Instructions: How to access Figma

Specifically for logged-in web

The modal will be implemented in 4 fixed widths, and 3 fixed heights. This needs to be fixed from the channel, because the content in the modal will be delivered from other sources.

Widths

• Medium (default) 512px
• Large 768px
• X-Large 960px
• XXL 1400px
• In mobile viewports the modal become a full takeover: 100% width

Heights

• Small 512px
• Medium 740px
• Large 960px
• In mobile viewports the modal become a full takeover: 100% width