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.
Wrap some content in the outer
.blankslate wrapper and add the
.blankslate-heading class to headings to give it the blankslate appearance.
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.
To add a border, wrap the blankslate component with the Box component.
border-radius on the top corners.