Primer CSS Box Overlay

Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by object-oriented CSS principles, functional CSS, and BEM architecture. It is highly reusable and flexible. It is created with GitHub’s design system.

Primer CSS Box overlay is used to create the overlay effect in primer CSS using Box--overlay class along with <details> and  <details-dialog> elements. If we want dark transparent background then the details-overlay-dark class is used. Box overlay is available in three widths as shown below.

Primer CSS Box overlay Classes:

• Box--overlay: This class is used to create the box overlay of 440px wide.
• Box-overlay--narrow: This class is used to create the box overlay of 320px wide.
• Box-overlay--wide: This class is used to create the box overlay of 640px wide.
• details-overlay-dark: This class is used to make the dark transparent background.

Syntax:

<details class="details-reset details-overlay">
 <summary class="btn" aria-haspopup="dialog">
 ...
 </summary>
 <details-dialog class="Box Box--overlay d-flex flex-column">
 ...
 </details-dialog>
</details>

Example 1: This example demonstrates the implementation of Primer CSS Box overlay.

Output:

Example 2: This example demonstrates the implementation of Primer CSS Box overlay.

Output: