Overlay

Use overlays to:

• Display supporting content related to the current page
• Display custom content layouts that need more flexibility than modals provide

Do not use overlays:

• For critical decisions or confirmations — use a modal or alert dialogue instead
• For short, focused content that fits in a modal — use a modal instead
• For content unrelated to the current page — navigate to a new page instead

Overlays vs modals vs drawers

Size and positioning

Maximum width

Overlays have a maximum width of 768px, derived from the recommended character line length for long-form content. This ensures optimal readability.

Viewport-based sizing

Overlays are available in sizes that adapt to different viewport widths:

Small (mobile screens)

• Always full-size due to limited screen space
• Changing the variant size has no impact on mobile
• Fills available viewport width with appropriate padding

Medium (tablet screens)

• 60% — Overlay width is 60% of viewport (up to 768px max-width)
• 80% — Overlay width is 80% of the viewport (up to 768px max-width)

Large (desktop screens)

• 60% — Overlay width is 60% of viewport (up to 768px max-width)
• 80% — Overlay width is 80% of the viewport (up to 768px max-width)
• Full — Overlay width fills available space (up to 768px max-width)

Selection criteria:

• Use 60% for moderate amounts of content
• Use 80% for more substantial content
• Use full for maximum space (large screens only)

Center alignment

Overlays are always centre-aligned to the viewport, ensuring consistent positioning across screen sizes.

Vertical spacing and scrolling

When the overlay fits on the screen:

• Overlay has margin above and below (32px from top and bottom of viewport)
• Content is fully visible without scrolling
• Overlay appears "floating" within the viewport

When the overlay is larger than the viewport:

• Overlay extends beyond the viewport height
• A scrollbar appears, allowing users to scroll down to read all the content
• Users can scroll the overlay content while the background remains fixed and obscured

Structure

Overlays typically contain:

• Header — Title and close button
• Content area — Custom content (scrollable if needed)
• Footer (optional) — Action buttons or additional controls
• Background overlay — Darkened backdrop that blocks the underlying page

Header

• Clear, descriptive title explaining the overlay's purpose
• Close icon button (typically an × icon button in the top-right)

Content area

• Primary content of the overlay
• Can contain custom layouts, long-form text, videos, images, or complex structures
• Scrollable when content exceeds available height
• Appropriate padding and spacing for readability
• Maximum width of 768px for optimal line length

Footer (Optional)

• Optional section for action buttons or controls
• Typically contains button groups