Skip to content

Backdrop

INFO

The Backdrop component is a simple overlay that can be used to obscure the background content and focus the user's attention on a specific element or area. It is often used in conjunction with Modals, Custom Dropdowns, Notifications / Snackbars, or other interactive components.

Usage

Use c-backdrop to create a transparent, blurry backdrop element. (Remove the style attributes from the Demo Code)

html
<div class="c-backdrop"></div>

Modifier Classes

The default version is a blurred backdrop, but you can also use a solid color by adding the -dark modifier.

html
<div class="c-backdrop -dark"></div>