A content overlay is a dialog modal that is triggered to launch. A content overlay can either take over the entire screen or just the module it is contained within.


Can display a variety of content, such as revealing content in current position, overtaking another content, or overtaking the screen.


Fully keyboard accessible and maintains focus in full screen mode. All overlays can be closed with the Escape key. Built in accordance to the W3 Dialog Modal Example


Property Attribute Description Type Default
closeTitle close-title Title attribute value for the close button. string 'Close Overlay'
fullScreen full-screen string 'true'
horizontalAlignment horizontal-alignment A pipe delimited setting for horizontal alignment. This only applies when fullscreen mode is activated. string 'center'
styleClass style-class string undefined
target target string undefined
verticalAlignment vertical-alignment A pipe delimited setting for vertical alignment. This only applies when fullscreen mode is activated. string 'center'


Event Description Type
contentOverlayActivated CustomEvent<HTMLElement>


Slot Description
"closeButton" Contents of the that will close the overlay when triggered.
"content" Contents that sit inside the overlay.
"header" This is adjacent to the close button, usually a header or title for the overlay.


View Example in New Window
Content Blocks free of warranty. All rights reserved.
Structural Preview


Launch Full Screen Video
  • Description
  • Benefits
  • Accessibility
  • Properties
  • Events
  • Slots
  • Examples