HTML

Backdrop

ExamplesDocumentationCSS Variables

Examples

Basic

Documentation

Overview

This component puts a backdrop over the entire viewport.

Usage

ClassApplied toOutcome
.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_BackdropFilter
blur(10px)
--pf-c-backdrop--Colorc_backdrop_Color
rgba(3,3,3,0.62)
--pf-c-backdrop--ZIndexc_backdrop_ZIndex
400