Skip to content

Blankslate

Stable

Blankslates are for when there is a lack of content within a page or section. Use them as placeholders to tell users why something isn't there. Be sure to provide an action to add content as well.

Basic example

Wrap some content in the outer .blankslate wrapper to give it the blankslate appearance.

With Octicons

When it helps the message, include (relevant) icons in your blank slate. Add the .blankslate-icon class to give icons the proper styling.

Add a graphic, button and/or link to add additional information and provide users a way to add content to this page.

Variations

Add an additional optional class to the .blankslate to change its appearance.

Narrow

.blankslate-narrow narrows the blankslate container to not occupy the entire available width.

Large

.blankslate-large increases the size of the text in the blankslate

Spacious

.blankslate-spacious significantly increases the vertical padding.

Note: It's possible to combine variations. Large and spacious (blankslate blankslate-large blankslate-spacious) is often used together.

Add border

To add a border, wrap the blankstate component with the Box component.

Capped

Removes the border-radius on the top corners.

Edit this page on GitHub
5 contributorssaintmalikjonrohansimuraiashygeecolebemis
Last edited by saintmalik on August 23, 2021