Primer CSS is a free and open-source CSS framework. It is built upon the systems that create the foundation of the basic style elements such as spacing, typography, and color. Created with GitHub’s design system, it is highly reusable and flexible.
Primer CSS Blankslate is used as a placeholder when there is a lack of content and notifying the user about the cause. Blankslates are used for the whole page or for a single section. When a user is not allowed in some section. the blankslates help to acknowledge the user about the cause and the action to take.
Primer CSS Blankslate Classes:
- blankslate: It is the outer wrapper class that contains the contents of the blankslate.
- blankslate-heading: It is the heading class for blankslate.
- blankslate-icon: It is used to add icons to the blankslate.
- blankslate-image: It is used to add images to the blankslate.
- blankslate-action: The class is added to the action like a button or links.
- blankslate-narrow: It narrows the blankslate to not occupy the whole width of the container in which it is placed.
- blankslate-large: It has a larger font size inside the blankslate.
- blankslate-spacious: It increases the vertical padding.
- box: It is used to add a border to blankslate.
- capped: It makes the border-radius to zero.
Primer CSS Blankslate Types:
- Basic Blankslate: It contains a wrapper blankslate with a blankslate heading.
- With Oticons: It contains a wrapper blankslate with a blankslate heading with icons.
- With Graphic, Button and Link: The blankslate contains images and actions such as buttons and links.
- Narrow Blankslate: The blankslate is narrow in size and doesn’t occupy the full width of the container.
- Large Blankslate: The font size of the text inside the blankslate is larger compared to normal blankslate.
- Spacious Blankslate: The vertical padding of the text inside the blankslate is larger compared to normal blankslate.
- Bordered Blankslate: The blankslate has a border around it.
- Capped Blankslate: The blankslate has zero border-radius on its corners.
Syntax: Create a blankslate as follows:
<div class="blankslate">
<h3 class="blankslate-heading">
Welcome to GeeksforGeeks
</h3>
<p>A computer science portal for geeks.</p>
</div>Example 1: In the following example, we have a basic blankslate.
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" />
<title>GeeksforGeeks | Primer CSS</title>
<link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
<script src=
</script>
</head>
<body>
<div class="o-container" style="padding: 1em;">
<center>
<div>
<h1 style="color: green;">GeeksforGeeks</h1>
</div>
<strong>Primer CSS Blankslate</strong>
<br />
<br />
</center>
<div class="blankslate">
<h3 class="blankslate-heading">
Welcome to GeeksforGeeks
</h3>
<p>A computer science portal for geeks.</p>
</div>
</div>
</body>
</html>
|
Output:
Example 2: In the following example, we have blankslate with image and action.
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" />
<title>GeeksforGeeks | Primer CSS</title>
<link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
<script src=
</script>
</head>
<body>
<div class="o-container" style="padding: 1em;">
<center>
<div>
<h1 style="color: green;">GeeksforGeeks</h1>
</div>
<strong>Primer CSS Blankslate</strong>
<br />
<br />
</center>
<div class="blankslate">
<img src=
class="blankslate-image" />
<h3 class="blankslate-heading">
Welcome to GeeksforGeeks
</h3>
<p>A computer science portal for geeks.</p>
<div class="blankslate-action">
<button class="btn btn-primary" type="button">
Ok
</button>
</div>
</div>
</div>
</body>
</html>
|
Output:
Example 3: In the following example, we have narrow blankslate, large blankslate, and spacious blankslate.
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" />
<title>GeeksforGeeks | Primer CSS</title>
<link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
<script src=
</script>
</head>
<body>
<div class="o-container" style="padding: 1em;">
<center>
<div>
<h1 style="color: green;">GeeksforGeeks</h1>
</div>
<strong>Primer CSS Blankslate</strong>
<br />
<br />
</center>
<div class="blankslate blankslate-narrow">
<img src=
class="blankslate-image" />
<h3 class="blankslate-heading">
Welcome to GeeksforGeeks
</h3>
<p>A computer science portal for geeks.</p>
<p>It is a narrow blankslate</p>
<div class="blankslate-action">
<button class="btn btn-primary" type="button">
Ok
</button>
</div>
</div>
<div class="blankslate blankslate-large">
<img src=
class="blankslate-image" />
<h3 class="blankslate-heading">
Welcome to GeeksforGeeks
</h3>
<p>A computer science portal for geeks.</p>
<p>It is a large blankslate</p>
<div class="blankslate-action">
<button class="btn btn-primary" type="button">
Ok
</button>
</div>
</div>
<div class="blankslate blankslate-spacious">
<img src=
class="blankslate-image" />
<h3 class="blankslate-heading">
Welcome to GeeksforGeeks
</h3>
<p>A computer science portal for geeks.</p>
<p>It is a spacious blankslate</p>
<div class="blankslate-action">
<button class="btn btn-primary" type="button">
Ok
</button>
</div>
</div>
</div>
</body>
</html>
|
Output:
Example 4: In the following example, we have bordered blankslate and capped blankslate.
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" />
<title>GeeksforGeeks | Primer CSS</title>
<link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
<script src=
</script>
</head>
<body>
<div class="o-container" style="padding: 1em;">
<center>
<div>
<h1 style="color: green;">GeeksforGeeks</h1>
</div>
<strong>Primer CSS Blankslate</strong>
<br />
<br />
</center>
<div class="Box">
<div class="blankslate">
<img src=
class="blankslate-image" />
<h3 class="blankslate-heading">
Welcome to GeeksforGeeks
</h3>
<p>A computer science portal for geeks.</p>
<p>It is a bordered blankslate</p>
<div class="blankslate-action">
<button class="btn btn-primary" type="button">
Ok
</button>
</div>
</div>
</div>
<br />
<div class="Box rounded-top-0">
<div class="blankslate">
<img src=
class="blankslate-image" />
<h3 class="blankslate-heading">
Welcome to GeeksforGeeks
</h3>
<p>A computer science portal for geeks.</p>
<p>It is a capped blankslate</p>
<div class="blankslate-action">
<button class="btn btn-primary" type="button">
Ok
</button>
</div>
</div>
</div>
</div>
</body>
</html>
|
Output: