Examples
Documentation
Overview
This component puts a backdrop over the entire viewport.
Usage
Class | Applied to | Outcome |
|---|---|---|
.pf-v6-c-backdrop | <div> | Initiates backdrop. Required |
.pf-v6-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
| Expand or collapse column | Selector | Variable | Value | |
|---|---|---|---|---|
| :where(:root, .pf-v6-c-backdrop) | --pf-v6-c-backdrop--Position | fixed | ||
| :where(:root, .pf-v6-c-backdrop) | --pf-v6-c-backdrop--ZIndex | 400 | ||
| ||||
| :where(:root, .pf-v6-c-backdrop) | --pf-v6-c-backdrop--BackgroundColor | (In light theme) rgba(21, 21, 21, 0.2000) | ||
| ||||
