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
Usage
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%
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
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.
