Primer CSS Details

Last Updated : 09 May, 2022

Primer CSS is a free open-source CSS framework that is built upon a GitHub design system to provide support to the broad spectrum of GitHub websites. It creates 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 a highly reusable model.

Primer CSS Details Classes are made in order to improve the behavior of the default HTML Details component.

Primer CSS Details Classes:

Fullscreen click area: The .details-overlay class is used to add to the <details> tag to expand the click area to the whole page. This means the user can click anywhere on the page to close the opened details tag.
Darkened fullscreen click area: The .details-overlay-dark class is used to add to the <details> tag to make its background dark.
Custom caret: The .details-reset class when added to the <details> tag, removes the default caret placed on the left of the details. We can then add our custom caret after using this class to the <details> tag.
Using button styles with the details summary element: The .dropdown-caret class is used to add a dropdown caret icon to the <details>.

Syntax:

<details class="DetailsClass">
    <summary class="..">..</summary>
</details>

Example 1: In this example, we have created a simple detail with a dropdown caret icon in the summary.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" 
          content="width=device-width,  
                   initial-scale=1.0"> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> 
    <title>Primer CSS Details</title> 
</head> 
  
<body> 
    <h1 style="color: green;"> 
        GeeksforGeeks 
    </h1> 
    <h3>Primer CSS Details</h3> 
    <div class="m-2"> 
        <details class="details-overlay"> 
            <summary class="btn btn-primary"> 
                Click Me  
                <span class="dropdown-caret"></span> 
            </summary> 
            <div class="border p-3 mt-2"> 
                This is the sample text that will be 
                shown when the "Click Me" text is clicked.  
            </div> 
        </details> 
    </div> 
</body> 
</html>

Output:

Example 2: In this example, we have created a detail with a dark overlay. It means that whenever we clicked, the background becomes dark.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" 
          content="width=device-width,  
                   initial-scale=1.0"> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> 
    <title>Primer CSS Details</title> 
</head> 
  
<body> 
    <h1 style="color: green;">GeeksforGeeks</h1> 
    <h3>Primer CSS Details</h3> 
    <div class="m-2"> 
        <details class="details-overlay details-overlay-dark"> 
            <summary class="btn btn-primary"> Click Me</summary> 
            <div class="border p-3 mt-2"> 
                This is the sample text that will be  
                shown when the "Click Me" text is clicked.  
            </div> 
        </details> 
    </div> 
</body> 
</html>