Primer CSS Blankslate Basic Example
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" > w3wiki </ 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" > w3wiki </ 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:
Reference: https://primer.style/css/components/blankslate#basic-example
Contact Us