Primer CSS Blankslate Graphic, Button and Link

Last Updated : 09 May, 2022

Primer CSS is a free open-source CSS framework that is built upon the 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.

One such useful component present in Primer CSS is Blankslate. It is one of the unique components only present in Primer CSS. In this article, we will learn about the Blankslate Graphic Button and Link.

What is the use of a Blank slate?

Blankslate is used to denote the blank spaces in the website where there is no content. Inside the blankslate component, the user is given the option to add content. This is very common in modern websites, like Github, and Google Drive where initially there is no content, and the user is given the option to upload content into it. In all such cases, a blank slate comes into action.

Now, in Primer CSS we can add graphics, icons, and buttons in Blankslates to make it look better.

Primer CSS Blank slate Graphics, icons, and buttons classes:

.blankslate- image: This class helps to add the image to the blankslate.

.blankslate-action: This class is added to any container containing buttons or links.

Syntax:

<div class ="blankslate"> 
    <img src=".." class="blankslate-image"/>
    <div class="blankslate-action" > 
        <button>....</button>
    </div>
    ...
</div>

Example 1: We have created a Blankslate with a button and image.

HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <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>Document</title> 
</head> 
<body> 
    <h1 style="color: green;">GeeksforGeeks</h1> 
    <h3>Primer CSS Small Blankslate</h3> 
    <div class="Box rounded-top-0"> 
        <div class="blankslate "> 
            <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20220429000958/download.png" 
                alt=""> 
            <h3 class="blankslate-heading"> 
                You don't have any articles uploaded. 
            </h3> 
            <p>Upload your articles on GeeksforGeeks 
                to help the Geek community.</p> 
            <div class="blankslate-action"> 
                <button class="btn btn-primary" type="button"> 
                    Upload 
                </button> 
            </div> 
        </div> 
    </div> 
</body> 
</html>

Output:

Example 2: We have created a blankslate with images and links.

Full Code:

HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <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>Document</title> 
</head> 
<body> 
    <h1 style="color: green;">GeeksforGeeks</h1> 
    <h3>Primer CSS Small Blankslate</h3> 
    <div class="Box rounded-top-0"> 
        <div class="blankslate "> 
            <img class="blankslate-image" src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20220429000958/download.png" 
                alt=""> 
            <h3 class="blankslate-heading"> 
                You don't have any articles uploaded. 
            </h3> 
            <p>Click on the link given below 
                to know more.</p> 
            <div class="blankslate-action"> 
                <button class="btn-link" type="button"> 
                    Learn more 
                </button> 
            </div> 
        </div> 
    </div> 
</body> 
</html>