Modals
Modals disable page functionality in order to highlight information or isolate a required action.
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.
1. Header
font-size: 20px
font-weight: bold
font-color: text-black #434343
padding-top: 48px
padding-left: 32px
2. Content
font-size: 16px
font-weight: book
font-color: text-black, #434343
padding-left: 32px
padding-right: 32px
padding-top: 16px
padding bottom: 16px
3. X
Height: 16px
Width: 16px
Stroke: 2px
Color: text-black #434343
padding-top: 16px
padding-right: 16px
4. CTA
font-weight: book
font-size: 20px
font-color: white
padding: 16px
border-radius: 5px
color: blue-medium #0bb8e3
padding-left: 32px
padding-top: 16px
padding-bottom: 32px
- 1.Header
font-size: 20px
font-weight: bold
font-color: text-black #434343
padding-top: 48px
padding-left: 16px
2. Content
font-size: 16px
font-weight: book
font-color: text-black, #434343
padding-left: 32px
padding-right: 32px
padding-top: 16px
padding bottom: 16px
3. X
Height: 16px
Width: 16px
Stroke: 2px
Color: text-black #434343
padding-top: 16px
padding-right: 16px
4. CTA
font-weight: book
font-size: 20px
font-color: white
padding: 16px
border-radius: 5px
color: blue-medium #0bb8e3
padding-left: 16px
padding-top: 16px
padding-bottom: 16px
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).
Desktop:
container-max-width: 568px
container-min-width: 368px
container-max-height: 560px
Mobile:
container-max-wdith: 100%
container-max-height: 100%
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
background-color: white #ffffff
line: 1px, grey-medium-light
Title
font-size: 20px
font-weight: bold
font-color: text-black #434343
padding-top: 16px
padding-left: 16px
X
Height: 16px
Width: 16px
Stroke: 2px
Color: text-black #434343
padding-top: 16px
padding-right: 16px
Sticky Footer
background-color: white #ffffff
line: 1px, grey-medium-light
Button
font-weight: book
font-size: 20px
font-color: white
padding: 16px
border-radius: 5px
color: blue-medium #0bb8e3
padding-left: 16px
padding-top: 16px
padding-bottom: 16px
Last modified 3yr ago