Skip to content
Related Articles

Related Articles

Primer CSS Details

View Discussion
Improve Article
Save Article
  • Last Updated : 09 May, 2022
View Discussion
Improve Article
Save Article

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>


Output:

 

Reference: https://primer.style/css/utilities/details


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!