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

To contain an overlay within an element set the parent element CSS to position: relative;

Basic Overlay

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



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

<div class="c-overlay c-overlay--dismissable"></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--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.