Style Guide
  • Handy Style Guide
  • Brand Guidelines
    • Logo
    • Color System
    • Line Icons
    • Expressive Icons
    • Typography
  • Native
    • Action Cards
      • Booking Cards
      • Job Cards
      • List Cards
      • Message Cards
      • User Cards
    • Avatars
    • Banners
    • Callouts
    • Buttons
    • Half Sheets
    • Headers
    • Icon Lists
    • Input Fields
    • Marketing
    • Message Bubbles
    • Modal
    • Navigation
    • Pickers
    • Reviews
    • Skeleton Loading States
    • Tabs
    • Typography - Native
      • Native Text Combinations
  • Web
    • Navigation
    • Grid and Layout
    • Forms
    • Typography (Web)
    • Buttons
    • Pickers
    • Modals
    • Cards
Powered by GitBook
On this page
  • Usage of Modals
  • Anatomy of Modals (m-modal)

Was this helpful?

  1. Native

Modal

Modals can contain critical information and require decisions from the user.

PreviousMessage BubblesNextNavigation

Last updated 5 years ago

Was this helpful?

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)

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