Overlays

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>

Variations

.c-overlay--dismissable

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>

.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--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.

Animation

.a-overlay

Apply the .a-overlay class to enable animation on the overlay.

--slow, --fast

Every animation comes with slow and fast modifiers.