Primer CSS Box Overlay

Last Updated : 05 May, 2022

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.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> Primer CSS Box overlay </title> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />  
</head> 
  
<body> 
    <div class="text-center"> 
        <h1 class="color-fg-success"> GeeksforGeeks </h1> 
        <h3> Primer CSS Box overlay </h3> <br> 
  
        <details class= 
           "details-reset details-overlay details-overlay-dark"> 
            <summary class="btn" aria-haspopup="dialog"> 
                Open Box overlay 
            </summary> 
            <details-dialog class= 
              "Box Box--overlay d-flex flex-column"> 
                <div class="Box-header"> 
                    <h3 class="Box-title"> 
                        GeeksforGeeks 
                    </h3> 
                </div> 
            </details-dialog> 
        </details> 
    </div> 
</body> 
</html>

Output:

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

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> Primer CSS Box overlay </title> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />  
</head> 
  
<body> 
    <div class="text-center"> 
        <h1 class="color-fg-success"> GeeksforGeeks </h1> 
        <h3> Primer CSS Box overlay </h3> <br> 
  
        <details class= 
           "details-reset details-overlay details-overlay-dark"> 
            <summary class="btn" aria-haspopup="dialog"> 
                Open Box overlay 
            </summary> 
            <details-dialog class= 
               "Box Box--overlay d-flex flex-column"> 
                <div class="Box-header"> 
                    <h3 class="Box-title"> 
                        GeeksforGeeks 
                    </h3> 
                </div> 
                <div class="overflow-auto"> 
                    <div class="Box-body overflow-auto"> 
                          
<p>A Computer Science portal for geeks.</p> 
  
                        <img src= 
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> 
                    </div> 
                </div> 
            </details-dialog> 
        </details> 
    </div> 
</body> 
</html>