Last updated: June 2017
Modals are a way of displaying supplementaty content or providing additional functionality to users without requiring them to visit another page/screen.
Each modal is built up of 2 elements:
The mask/overlay of a modal is a key separator between the modal and the page content beneath. The mask is not be opaque so that users know they are still on the same page and can quickly return to their workflow.
The mask should be black with 75% opacity.
The outer spacing between the modal container and the viewport edges is based on the viewport’s dimensions relative to the modal container’s width with the modal container centred horizontally and vertically:
0pxof spacing on all sides until the the viewport is wider than 640px
8pxof spacing on all sides is used until the viewport is wider than 768px
24pxof spacing on all sides after the viewport is wider than 1024px
The modal container is made of up the same 3 header, body and footer elements as Cards. However only the header and footer elements are optional.
The width of the modal container is dictated by the requirements of the modal, however there are 3 default/recommended widths of small
900px and large
1200px For example the Player Cards modal contains a large amount of information and so has a maximum width of 1200px, however an onboarding modal containing an illustration and a small amount of copy may have a maximum limit of 600px.
The modal header features a close button using the
red color, modals with colored headers should have a
white close button. The close button should be aligned to the center of the header’s title text unless the title runs across multiple lines or the header features a custom layout. On those occasions it should follow the Card header’s padding of
24px depending on context. The header also features a shadow to help clarify the stacked effect of the sticky header:
Shadow: RGBA: 0, 0, 0, 0.2 X: 0 Y: 1 Blur: 2 Spread: 0
Header text sizes should follow the heirarchy set out in Typography, with
$alpha as the default starting point. A smaller starting size may be needed based on the specific modal and other content in the header.
As with Cards headers can contain a range of components such as tabs, or could feature bespoke headers like those in Player Cards modals.
The modal body uses the
page background color and fills the full height of the modal minus the header and footer height as appropriate.
Padding inside the modal matches that of Card’s body padding of
24px depending on context.
The scrolling behaviour of modals features a sticky positioned header and footer (optional) with the body being the only element of the modal which is scrollable.
Care should be taken to ensure short viewport heights are considered in particular modal implementations, for example Player Cards could switch a minimal version of the header on short viewports.
The modal footer follows the Card footer’s padding of
16px/24px depending on context, with a white background and can contain a variety of components. The footer uses the same shadow styling as the header, with the shadow set to appear at the top of the footer:
Shadow: RGBA: 0, 0, 0, 0.2 X: 0 Y: -1 Blur: 2 Spread: 0