Style Guide
Search…
Modals
Modals disable page functionality in order to highlight information or isolate a required action.
Usage of Modals
Modals disable page functionality in order to highlight information or isolate a required action. Modals should be used sparingly, open only when initiated by the user, and should not pop up unexpectedly when the user is in the middle of a flow.
Exception: Exit intent or marketing offer modals that open automatically are acceptable when the user is idling on the page for an extended period of time.
Anatomy of Desktop Modal
1. Header
1
font-size: 20px
2
font-weight: bold
3
font-color: text-black #434343
4
padding-top: 48px
5
padding-left: 32px
Copied!
2. Content
1
font-size: 16px
2
font-weight: book
3
font-color: text-black, #434343
4
padding-left: 32px
5
padding-right: 32px
6
padding-top: 16px
7
padding bottom: 16px
Copied!
3. X
1
Height: 16px
2
Width: 16px
3
Stroke: 2px
4
Color: text-black #434343
5
padding-top: 16px
6
padding-right: 16px
Copied!
4. CTA
1
font-weight: book
2
font-size: 20px
3
font-color: white
4
padding: 16px
5
​
6
border-radius: 5px
7
color: blue-medium #0bb8e3
8
padding-left: 32px
9
padding-top: 16px
10
padding-bottom: 32px
Copied!
Anatomy of a Mobile Web Modal
- 1.Header
1
font-size: 20px
2
font-weight: bold
3
font-color: text-black #434343
4
padding-top: 48px
5
padding-left: 16px
Copied!
2. Content
1
font-size: 16px
2
font-weight: book
3
font-color: text-black, #434343
4
padding-left: 32px
5
padding-right: 32px
6
padding-top: 16px
7
padding bottom: 16px
Copied!
3. X
1
Height: 16px
2
Width: 16px
3
Stroke: 2px
4
Color: text-black #434343
5
padding-top: 16px
6
padding-right: 16px
Copied!
4. CTA
1
font-weight: book
2
font-size: 20px
3
font-color: white
4
padding: 16px
5
​
6
border-radius: 5px
7
color: blue-medium #0bb8e3
8
padding-left: 16px
9
padding-top: 16px
10
padding-bottom: 16px
Copied!
Modal Sizes
On desktop, large modals have a max width of 568px and small modals are 368px wide. These widths align to our desktop grid. On mobile web screens, modals should always be 100% of the screen width (375px for standard iphone sizes).
1
Desktop:
2
container-max-width: 568px
3
container-min-width: 368px
4
container-max-height: 560px
5
​
6
Mobile:
7
container-max-wdith: 100%
8
container-max-height: 100%
Copied!
Scrolling Modals
If modal content exceeds the container max height on desktop or mobile web, we switch to a modal with scroll functionality. For scrolling modals, the header and footer + CTA stick to the top and bottom of the container, and the information in the center scrolls up and down.
Sticky Header
1
background-color: white #ffffff
2
line: 1px, grey-medium-light
3
​
4
Title
5
font-size: 20px
6
font-weight: bold
7
font-color: text-black #434343
8
padding-top: 16px
9
padding-left: 16px
10
​
11
X
12
Height: 16px
13
Width: 16px
14
Stroke: 2px
15
Color: text-black #434343
16
padding-top: 16px
17
padding-right: 16px
Copied!
Sticky Footer
1
background-color: white #ffffff
2
line: 1px, grey-medium-light
3
​
4
Button
5
font-weight: book
6
font-size: 20px
7
font-color: white
8
padding: 16px
9
​
10
border-radius: 5px
11
color: blue-medium #0bb8e3
12
padding-left: 16px
13
padding-top: 16px
14
padding-bottom: 16px
Copied!
Last modified 2yr ago