Modals

Components

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.

Basic structure

Each modal is built up of 2 elements:

  1. Mask/overlay
  2. Container

Mask/overlay

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.

Spacing and alignment

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:

  • 0px of spacing on all sides until the the viewport is wider than 640px
  • 8px of spacing on all sides is used until the viewport is wider than 768px
  • 24px of spacing on all sides after the viewport is wider than 1024px

Container

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 600px, medium 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 16px/12px or 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 12px or 24px depending on context.

Scrolling behaviour

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 12px or 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