Open In App

Primer CSS Select menu Blankslate

Improve
Improve
Like Article
Like
Save
Share
Report

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 offers Select Menu that has superior assistance for filtering, navigation, and so on. In this article, we will discuss the Select Menu Blankslate. Select Menu Blankslate uses SelectMenu-blankslate class to add some content to the menu list.

Primer CSS Blankslate class:

  • SelectMenu-blankslate: This class is used to display blank slate content in the menu list.

Syntax:

<details class="details-reset details-overlay" open>
  <summary class="btn" aria-haspopup="true">
    ...
  </summary>

  <div class="SelectMenu">
    <div class="SelectMenu-modal">
      <header class="SelectMenu-header">
        <h3 class="SelectMenu-title">......</h3>            
      </header>
      <div class="SelectMenu-list">
        <div class="SelectMenu-blankslate">
         ...
        </div>
      </div>
    </div>
  </div>
</details>

Example 1: Below is the example that demonstrates the use of Primer CSS Select Menu Blankslate.

HTML




<!DOCTYPE html>
<html>
  
<head>
  <title> Primer CSS Select Menu blankslate </title>  
  <link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
</head>
  
<body style="margin-inline: 10rem;">
    <h1 class="color-fg-success mt-5"> GeeksforGeeks </h1>
    <h3> Primer CSS Select Menu blankslate </h3>
      
    <details class="details-reset details-overlay" open>
      <summary class="btn" aria-haspopup="true">
        Choose any course
      </summary>
  
      <div class="SelectMenu">
        <div class="SelectMenu-modal">
          <header class="SelectMenu-header">
            <h3 class="SelectMenu-title">GeeksforGeeks</h3>            
          </header>
          <div class="SelectMenu-list">
            <div class="SelectMenu-blankslate">
              <h4 class="my-2">No courses added yet!</h4>
              <button type="button" class="btn btn-sm btn-primary">
                Click here to add any course.
              </button>
            </div>
          </div>
        </div>
      </div>
    </details>
</body>
  
</html>


Output:

Primer CSS Blankslate

Example 2: Below is another example that demonstrates the use of Primer CSS Select Menu Blankslate.

HTML




<!DOCTYPE html>
<html>
  
<head>
  <title> Primer CSS Select Menu blankslate </title>
  <link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
</head>
  
<body style="margin-inline: 10rem;">
    <h1 class="color-fg-success mt-5"> GeeksforGeeks </h1>
    <h3> Primer CSS Select Menu blankslate </h3>
      
    <details class="details-reset details-overlay" open>
      <summary class="btn" aria-haspopup="true">
        Choose tutorial to learn
      </summary>
  
      <div class="SelectMenu">
        <div class="SelectMenu-modal">
          <header class="SelectMenu-header">
            <h3 class="SelectMenu-title">
              GeeksforGeeks-Tutorials
            </h3>            
          </header>
          <div class="SelectMenu-list">
            <div class="SelectMenu-blankslate">
              <h4 class="my-2">No tutorial added yet!</h4>
              <button type="button" class="btn btn-sm btn-primary">
                Click here to add tutorial.
              </button>
            </div>
          </div>
        </div>
      </div>
    </details>
</body>
  
</html>


Output:

Primer CSS Blankslate

Reference: https://primer.style/css/components/select-menu#blankslate



Last Updated : 21 Apr, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads