Primer CSS Blankslate Octicons

Last Updated : 25 Apr, 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 Blankslate Octicons is used to show the blank state using the octicons. To create the blankslate octicon, we will use blankslate-icon class. In this article, we will discuss Primer CSS Blankslate Octicons.

Primer CSS Blankslate Octicons Class:

blankslate-icon: This class is used to create the blankslate icon.

Syntax:

<div class="blankslate">
      SVG ICON
  <h3 class="blankslate-heading">
       ...
  </h3>
  ...
</div>

Example 1: The following example demonstrates the Primer CSS Blankslate Octicons.

HTML

<!DOCTYPE html> 
<html> 
      
<head> 
    <title> Primer CSS Blankslate Octicons </title> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css"/> 
</head> 
  
<body class="m-2"> 
    <div class="text-center"> 
        <h1 class="color-fg-success"> GeeksforGeeks </h1> 
        <h3> Primer CSS Blankslate Octicons </h3> <br> 
  
        <div class="blankslate"> 
            <svg class="octicon" viewBox="0 0 16 16" 
                 xmlns="http://www.w3.org/2000/svg" 
                 width="30" height="30" > 
                <path fill-rule="evenodd"
                    d="M8 1.5a6.5 6.5 0 100 13 6.5 6.5  
                    0 000-13zM0 8a8 8 0 1116 0A8 8 0 010  
                    8zm6.5-.25A.75.75 0 017.25 7h1a.75.75 0 
                    01.75.75v2.75h.25a.75.75 0 010 1.5h-2a.75.75 0 
                    010-1.5h.25v-2h-.25a.75.75 0 01-.75-.75zM8 6a1 1 0 
                    100-2 1 1 0 000 2z"> 
                </path> 
            </svg> 
            <h3 class="blankslate-heading"> No content </h3> 
        </div> 
    </div> 
</body> 
  
</html>

Output:

Primer CSS Blankslate Octicons

Example 2: The following example demonstrates the Primer CSS Blankslate Octicons.

HTML

<!DOCTYPE html> 
<html> 
      
<head> 
    <title> Primer CSS Blankslate Octicons </title> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css"/> 
</head> 
  
<body class="m-2"> 
    <div class="text-center"> 
        <h1 class="color-fg-success"> GeeksforGeeks </h1> 
        <h3> Primer CSS Blankslate Octicons </h3> <br> 
  
        <div class="blankslate"> 
            <svg class="octicon" viewBox="0 0 16 16" 
                 xmlns="http://www.w3.org/2000/svg" 
                 width="30" height="30" > 
                <path fill-rule="evenodd"
                    d="M8 1.5a6.5 6.5 0 100 13 6.5 6.5  
                    0 000-13zM0 8a8 8 0 1116 0A8 8 0 010  
                    8zm6.5-.25A.75.75 0 017.25 7h1a.75.75 0 
                    01.75.75v2.75h.25a.75.75 0 010 1.5h-2a.75.75 0 
                    010-1.5h.25v-2h-.25a.75.75 0 01-.75-.75zM8 6a1 1 0 
                    100-2 1 1 0 000 2z"> 
                </path> 
            </svg> 
            <h3 class="blankslate-heading"> No content </h3> 
            <p> This is blank page </p> 
            <div class="blankslate-action"> 
                <button class="btn btn-primary" type="button"> 
                    Open GeeksforGeeks 
                </button> 
            </div> 
        </div> 
    </div> 
</body> 
  
</html>