Modals are floating, centred windows that overlay everything else, due to their high importance on the user's journey.
While a modal is open, all the other functionalities on the app are disabled, until the required action has been taken or the modal is dismissed (if dismissible).
Modal used in CS+ for outlet change
|
Component |
Usage |
Placement |
User Actions |
|---|---|---|---|
|
Medium modal |
Informative content |
Center of the screen, overlaying everything else |
Confirmation / Cancellation |
|
Large modal |
Multiple actions, such as forms, cookies configuration, etc. |
Center of the screen, overlaying everything else |
Form actions |
|
Xlarge modal |
Extensive/multi-step form actions |
Center of the screen, overlaying everything else |
Form actions |
Anatomy
Structure
|
1. header2. title3. close button4. content5. footer |
|
header |
If there is no title and the modal is not dismissible, this section will not be displayed. |
|
title |
|
|
close button |
Visible in case the modal is dismissible. |
|
content |
This section can contain anything. |
|
footer |
This is where the call-to-actions will be placed.
If there are no actions, this section will not be displayed.
There can be 2 buttons, like this very example, where the left button is the secondary one and is used for going back or cancellation actions. The right button, the primary button, is used for the main confirmation action.
If there is only one button, it'll be the primary one. |
Sizes and Spaces
Properties
|
Property |
Values |
Description |
|---|---|---|
|
Header |
|
|
|
Title |
true false |
Shows or hides the main title on the header section |
|
Dismissible |
true false |
Shows or hides the close button on the header section |
|
Footer |
|
|
|
Actions |
none 1 action 2 actions |
Displays either one or two buttons on the footer section. When there is only one action, the button displayed is the primary one. It'll contain only a confirmation call to action. When there are two actions, there is one primary button and one secondary button. The primary is for confirmation and the secondary is for cancellation. |
Behaviour
Responsiveness
Max-width on each breakpoint
|
Component |
xlarge >1366px |
large 1366px |
medium 1024px |
small 768px |
xsmall 428px |
|---|---|---|---|---|---|
|
medium modal |
640px |
640px |
640px |
640px |
100% (6 cols) |
|
large modal |
860px |
860px |
860px |
100% (6 cols) |
100% (6 cols) |
|
xlarge modal |
1024px |
1024px |
100% (12 cols) |
100% (6 cols) |
100% (6 cols) |
Max-height on each breakpoint
|
Component |
xlarge >1366px |
large 1366px |
medium 1024px |
small 768px |
xsmall 428px |
|---|---|---|---|---|---|
|
All modals |
80vh |
80vh |
80vh |
100vh 16pxtop and bottom margins |
100vh 16pxtop and bottom margins |
Guidelines
|
|