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 =
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:
Basic Blankslate
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 =
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 >
|
Output:
Basic Blankslate
Reference: https://primer.style/css/components/blankslate#basic-example
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...