Primer CSS Blankslate Variations

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 Blankslates. It is one of the unique components only present in Primer CSS. In this article, we will learn about the different variations of the blank slate component in Primer CSS.

What is the use of a Blankslate?

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 get the option to upload content into it. In all such cases, a blank slate comes into action.

In Primer CSS, we can create different variations in the blankslate classes by additional optional classes along with the “blankslate” class.

The different components of Blankslate Variation are given below:

Narrow Blankslate: We can create a narrow blank slate by using the class .blankslate-narrow to the blank slate component. This makes the blankslate to be narrow and it does not occupy the entire available width of the page.
Large Blankslate: We can increase the size of the text by using the .blankslate-large class in the blankslate component. This increases the size of any text inside the Blankslate.
Spacious Blankslate: We use the .blankslate-spacious class to increase the vertical padding between the blankslate text.
Adding Border: We can also add a border to the blankslate component by wrapping the entire blankslate component inside a Box component. This adds a border to the Blankslate.
Capped Border: We can remove the border-radius from the top corners of the blankslate borders by adding the class .rounded-top-0 to the box component.

Note: We can combine two variations together like large and spacious, medium blankslate with border, and many more.

Syntax:

<div class ="..."> 
      ...
</div>

Example 1: We have created a narrow blank slate with a border using the box component.

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"/> 
</head> 
<body> 
    <h1 style="color: green;">GeeksforGeeks</h1> 
    <h3>Primer CSS Small Blankslate</h3> 
    <div class="blankslate"> 
        <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20220504234629/copywriting-300x300.png" 
            alt="" class="blankslate-image"/> 
        <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 color-bg-done-emphasis" 
                type="button" style="color: white;"> 
                Upload 
            </button> 
        </div> 
        <div class="blankslate-action"> 
            <button class="btn-link" type="button"> 
                Learn how to write articles 
            </button> 
        </div> 
    </div> 
</body> 
</html>

Output:

Example 2: We have created a small blank slate with a border.

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"/> 
</head> 
<body> 
    <h1 style="color: green;">GeeksforGeeks</h1> 
    <h3>Primer CSS Small Blankslate</h3> 
    <div class="Box rounded-top-0 m-4 color-shadow-large"> 
        <div class="blankslate"> 
            <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20220504234629/copywriting-300x300.png" 
                alt="" class="blankslate-image"/> 
            <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 color-bg-done-emphasis" 
                    type="button" style="color: white;"> 
                    Upload 
                </button> 
            </div> 
        </div> 
    </div> 
</body> 
</html>