Modal
Modals can contain critical information and require decisions from the user.
Modals disable all app functionality and remain on the screen until a required action has been taken.
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)
font-weight: bold
font-size: 20px;
font-color: text-black
padding-left: 16px
padding-right: 16px
padding-top: 24px
padding-bottom: 24px
2. Content (a-text-paragraph)
font-weight: book
font-size: 16px
font-color: text-black
line-height: 1.5
padding: 16px
3. CTA Group (button-modal-small-primary and secondary)
Primary CTA:
max-width: 151.5px
max-height: 44px
border-radius: 5px
color: red-medium
font-family: book
font-size: 16px;
font-color: white
padding: 12px
Secondary CTA:
max-width: 151.5px
max-height: 44px
border: 1px
border-radius: 5px
color: blue-medium
font-family: book
font-size: 16px;
font-color: blue-medium
padding: 12px
Last modified 3yr ago