Overlay Components

Overlay Components provide another layer over the main content and direct the user to focus on key information.

Key Points

  • Overlays have a number of sizes that can be used to suit the content they are displaying
  • Overlays can contain more custom content than modals
  • They share the same patterns to display and hide as modals
  • Like modals the background layer blocks on the levels below to focus the users attention





Placeholder shows where custom content can be added on a 60% overlay.

Overlays allow for further secondary content within the context of a that it relates to to. This secondary content could be legal documentation, further information or analysis.

Unlike a modal this content can be:

  • Custom content
  • Be displayed at various sizes in relation to the viewport
  • Contain content that is vertically scrollable

Size & Positioning

Overlays are available in the following sizes, but have a max-width of 768px.

  • Small - For use on mobile screen, changing the variant size will have no impact due to the limited screen real estate we are working with. Small overlays are always full size.
  • Medium - For use on tablet screen display, variant sizes range from, 60%, 80%
  • Large - For use on large screen display, variant sizes range from full, 60%, 80%
Small Screen

Small Screen

The overlay should take up the full viewport on small screens

The 60% and 80% value relates to the percentage of the screen the overlay's width will accommodate. The overlay will always be center-aligned to the viewport. There should be a 32px padding from the top or bottom of the viewport

Medium and Above

Medium and Above

On wider viewports, the overlay dialogue can be 60% or 80% up to a maximum width of 768px (48em)

The max-width is derived from the recommended character line length, and matches up with the overall width of long-form content. The remaining area is uses the overlay style to indicate that the container is at a hight elevation level.

Overlay - Overflow

Overlay - Overflow

If the content creates a dialog that has a larger height than the viewport, then it will overflow off the screen.