Modal

Modals provide important information or present users with a decision to make. Modals have to be placed on a dark overlay which disables all the interactions with the screen behind. They can also be used as alert dialogs, which are used exclusively for non-repetitive interactions that are essential for user task completion. Use modals sparingly as they interrupt the users' journey.

Usage guidelines

When to use

• To prompt a user action or display additional content without leaving the current screen.
• As alert dialogs, for non-repetitive interactions that are essential for user task completion.

When not to use

• If you need to communicate a more lightweight information without interrupting the user journey; consider using a Notification instead.

Writing guidelines

• Length: Capture the most important purpose of the modal in the title, further explanation should be expressed in a description section. Keep both the title and the description concise.
• Capitalization and case: Write all content in sentence case.

Specifications

Anatomy

1. Container
2. Content placeholder
3. Close button (optional)
4. Background overlay

Variants

Modal is available in two variants: Default and Carousel. On a modal, you can insert the content you need. For a modal that needs multiple steps (for example an onboarding), use the carousel variant.

Size

There are two different sizes of modals: Responsive and Mobile.

Responsive

Responsive modal can be resized to fit into Desktop, Tablet Landscape and Tablet Portrait viewports. Note that some rules should be respected:

• Desktop / Tablet Landscape: 6 or 8 columns width.
• Tablet Portrait: 8 or 10 columns width.

Styling

Overlay

To make it clear that the rest of the page is inaccessible and to focus attention on the modal, the page behind the modal should be darkened.

Use the Overlay-Black color style as background (Black, 54% opacity) behind the modal and on top of the screen's remaining content.

Content

Modals can accommodate different kinds of content. They usually include:

• An image, icon or pictogram (optional);
• A header;
• A short description;
• Button(s) - a primary and a secondary actions.

Behavior

Positioning

Modals are positioned on top of page content, in a central position in the screen. In mobile viewports they are pinned to the bottom of the screen.

Alignment

Align modals as following:

• Desktop / Tablet Landscape: 6 or 8 columns width.
• Tablet Portrait: 8 or 10 columns width.
• Mobile: full-width.

Padding

Content

Content in modals is typically centrally aligned.

Interaction

Dismissible modal

A modal can be dismissed by clicking the close icon, anywhere outside the modal or a secondary button, if present.

Non dismissible modal

When modals are used as alert dialogs the close icon can be omitted, making the buttons the only interactive elements. Those must allow the user to either return to the screen behind or advance in the process.

Accessibility

Content within modals must follow accessibility guidelines: read our Accessibility guidelines for detailed information.

Related components