HTML

Backdrop

ExamplesDocumentationCSS variables

Examples

Backdrop example

Backdrop example
Copied to clipboard

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

CSS variables

--pf-c-backdrop--BackdropFilterc_backdrop_BackdropFilterblur(10px)
--pf-c-backdrop--Colorc_backdrop_Colorrgba(3,3,3,.62)
--pf-c-backdrop--ZIndexc_backdrop_ZIndex400