Overlays

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>

Variations

.c-overlay--visible

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

.c-overlay--dismissible

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>

.c-overlay--transparent

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>

.c-overlay--fullpage

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.