PF Next

Backdrop

Backdrop Example

Preview

This Preview can only be accessed in full page mode.
<div class="pf-c-backdrop">
</div>

Documentation

Overview

This component puts a backdrop over the entire viewport.

Usage

Class Applied To Outcome
.pf-c-backdrop <div> Initiates backdrop. Required
.pf-c-backdrop__open <body> Lock scrolling when backdrop is active. This class should be set on <body> while backdrop is active and removed while backdrop is inactive. Required