Primer CSS Blankslate

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.

Output:

👁 Image

Example 2: In the following example, we have blankslate with image and action.

Output:

👁 Image

Example 3: In the following example, we have narrow blankslate, large blankslate, and spacious blankslate.

Output:

👁 Image

Example 4: In the following example, we have bordered blankslate and capped blankslate.

Output:

👁 Image