Style Guide
Search…
Modal
Modals can contain critical information and require decisions from the user.
Usage of Modals
Modals disable all app functionality and remain on the screen until a required action has been taken.
Anatomy of Modals (m-modal)
Due to its disruptive nature, modals should be used sparingly. Examples include abandoned checkout, Handy Select booking cancellation, late fees, plan cancellation, and sign out.
1. Modal title (a-text-h3)
1
font-weight: bold
2
font-size: 20px;
3
font-color: text-black
4
​
5
padding-left: 16px
6
padding-right: 16px
7
padding-top: 24px
8
padding-bottom: 24px
Copied!
2. Content (a-text-paragraph)
1
font-weight: book
2
font-size: 16px
3
font-color: text-black
4
line-height: 1.5
5
padding: 16px
Copied!
3. CTA Group (button-modal-small-primary and secondary)
1
Primary CTA:
2
max-width: 151.5px
3
max-height: 44px
4
border-radius: 5px
5
color: red-medium
6
​
7
font-family: book
8
font-size: 16px;
9
font-color: white
10
padding: 12px
11
​
12
Secondary CTA:
13
max-width: 151.5px
14
max-height: 44px
15
border: 1px
16
border-radius: 5px
17
color: blue-medium
18
​
19
font-family: book
20
font-size: 16px;
21
font-color: blue-medium
22
padding: 12px
Copied!
Last modified 2yr ago
Copy link