Skip to main content


Overlays are used in a lot of other components to blackout the background context of the page.

Basic Overlay

<div class="c-overlay c-overlay--visible"></div>



Overlays are by default hidden. To make the visible use the .c-overlay--visible modifier.


To give the sense that you can click on an overlay to make it disappear give it the .c-overlay--dismissible modifier.

<div class="c-overlay c-overlay--visible c-overlay--dismissible"></div>


Overlays don't necessarily need to be visible, they can appear transparent to provide functionality but no visual cues. If so use the .c-overlay--transparent modifier.

<div class="c-overlay c-overlay--visible c-overlay--dismissible c-overlay--transparent"></div>


You can make overlays cover the entire page by adding the .c-overlay--fullpage modifier. The overlay will remain in a fixed position behind the content you want to promote.