Modals
Introduction
Modals focus the user’s attention exclusively on one task or piece of information via a window that sits on top of the page content. Modals interrupt a user’s workflow by design. When active, a user is blocked from the on-page content and cannot return to their previous workflow until the modal task is completed or the user dismisses the modal. If a user needs to repeatably preform a task, consider making the task do-able from the main page.
Large
Choose the size of the modal by it’s content. A large modal is between 768px - 1024px wide and will appear full-screen on mobile.
Desktop
Max width 1024px, min width 768px. Page overlay: #000000 Opacity: 16%, Padding: 80px Rounded corners: 3px, Drop shadow: Large. Position: centred within viewport width and height.
Max width 1024px, min width 768px. Page overlay: #000000 Opacity: 16%, Padding: 80px Rounded corners: 3px, Drop shadow: Large. Position: centred within viewport width and height.
Mobile
Full screen, no dropshadow.
Padding: 16px, 16px, 48px, 16px
Full screen, no dropshadow.
Padding: 16px, 16px, 48px, 16px
Example layout desktop:
Example layout mobile:
Modal build:
Small
Small modals are fixed at 512px wide for desktop and 300px wide for mobile. The height is determind by the content.
Desktop
Width: 512px. Page overlay: #000000 Opacity: 16%, Padding: 40px, 56px, 40px, 40px Rounded corners: 3px, Drop shadow: Large. Position: centred within viewport width and height.
Width: 512px. Page overlay: #000000 Opacity: 16%, Padding: 40px, 56px, 40px, 40px Rounded corners: 3px, Drop shadow: Large. Position: centred within viewport width and height.
Mobile
Width: 328px
Page overlay: #000000 Opacity: 16%
Padding: 24px, 48px, 24px, 24px
Rounded corners: 3px Drop shadow: Default Centred within viewport width and height.
Width: 328px
Page overlay: #000000 Opacity: 16%
Padding: 24px, 48px, 24px, 24px
Rounded corners: 3px Drop shadow: Default Centred within viewport width and height.
Example layout desktop:
Example layout mobile:
