Primer CSS Blankslate Basic Example

Last Updated : 26 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. It is highly reusable and flexible. It is created with GitHub’s design system.

Blank slates are used to act as a placeholder for some content that has not yet loaded. It gives a reason to the user as to why that specific area is not loading up the content, There are different types of blank slates available in the Primer CSS.

Syntax:

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

Note: Add blankslate class to implement this component.

Example 1: This example demonstrates the Primer CSS Blank slate basic example using the blankslate class.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Primer CSS Blankslate basic example</title>
    <link href=
"https://unpkg.com/@primer/css@^19.0.0/dist/primer.css"
        rel="stylesheet" />
</head>

<body>
    <div class="text-center">
        <h1 class="color-fg-success">
            GeeksforGeeks
        </h1>
        
        <h5>Primer CSS Blankslate basic example</h5><br />

        <div class="blankslate">
            <h3 class="blankslate-heading">
                No records available ‼
            </h3>
            <p>
                Please contact the administrator to 
                get further information on the issue.
            </p>
        </div>
    </div>
</body>

</html>

Output:

Example 2: The following code demonstrates the blankslate and blankstate-heading classes.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
        Primer CSS Blankslate basic example
    </title>
    <link href=
"https://unpkg.com/@primer/css@^19.0.0/dist/primer.css"
        rel="stylesheet" />
</head>

<body>
    <div class="text-center">
        <h1 class="color-fg-success">
            GeeksforGeeks
        </h1>
        
        <h5>Primer CSS Blankslate basic example</h5><br />

        <div class="blankslate">
            <h3 class="blankslate-heading">
                404 Error !! <br /> Page Not Found
            </h3>
            
            <p>
                Sorry, the page you are looking for 
                does not exist.<br />If you think 
                something is broken , please report.
            </p>
        </div>
    </div>
</body>

</html>