Skip to content

Blankslate

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 toghether.

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
3 contributorssimuraiashygeecolebemis
Last edited by simurai on September 14, 2020