Skip to content



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 and add the .blankslate-heading class to headings 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. Add the .blankslate-image class to the image, and the .blankslate-action to any button or link wrappers.


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


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


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


.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 blankslate component with the Box component.


Removes the border-radius on the top corners.

Edit this page on GitHub
7 contributorsjsorefhectahertzsaintmalikjonrohansimuraiashygeecolebemis
Last edited by jsoref on March 8, 2022