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 to give it the blankslate appearance.
Use it to provide information when no dynamic content exists.
<div class="blankslate">
<h3>This is a blank slate</h3>
<p>Use it to provide information when no dynamic content exists.</p>
</div>
When it helps the message, include .ki-lg
s as the first elements in the blank slate. Be sure to use relevant icons.
Use it to provide information when no dynamic content exists.
<div class="blankslate">
<span class="ki-lg ki-git-commit"></span>
<span class="ki-lg ki-tag"></span>
<span class="ki-lg ki-git-branch"></span>
<h3>This is a blank slate</h3>
<p>Use it to provide information when no dynamic content exists.</p>
</div>
Add an additional optional class to the .blankslate
to change its appearance.
Narrows the blankslate container to not occupy the entire available width.
Use it to provide information when no dynamic content exists.
<div class="blankslate has-fixed-width">
<h3>This is a blank slate</h3>
<p>Use it to provide information when no dynamic content exists.</p>
</div>
Removes the border-radius
on the top corners.
Use it to provide information when no dynamic content exists.
<div class="blankslate capped">
<h3>This is a blank slate</h3>
<p>Use it to provide information when no dynamic content exists.</p>
</div>
Significantly increases the vertical padding.
Use it to provide information when no dynamic content exists.
<div class="blankslate spacious">
<h3>This is a blank slate</h3>
<p>Use it to provide information when no dynamic content exists.</p>
</div>
Removes the background-color
and border
.
Use it to provide information when no dynamic content exists.
<div class="blankslate clean-background">
<h3>This is a blank slate</h3>
<p>Use it to provide information when no dynamic content exists.</p>
</div>