css/docs/blankslate.md

layout	title
page	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.

Contents

• Will be replaced with the ToC, excluding the "Contents" header {:toc}

Basic example

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

{% example html %}

This is a blank slate

Use it to provide information when no dynamic content exists.

{% endexample %}

With Octicons

When it helps the message, include (relevant) icons in your blank slate. Add .blankslate-icon to any .mega-octicons as the first elements in the blankslate, like so.

{% example html %}

This is a blank slate

Use it to provide information when no dynamic content exists.

{% endexample %}

Variations

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

Fixed width

Narrows the blankslate container to not occupy the entire available width.

{% example html %}

This is a blank slate

Use it to provide information when no dynamic content exists.

{% endexample %}

Capped

Removes the border-radius on the top corners.

{% example html %}

This is a blank slate

Use it to provide information when no dynamic content exists.

{% endexample %}

Spacious

Significantly increases the vertical padding.

{% example html %}

This is a blank slate

Use it to provide information when no dynamic content exists.

{% endexample %}

Large

Increases the size of the text in the blankslate

{% example html %}

This is a blank slate

Use it to provide information when no dynamic content exists.

{% endexample %}

No background

Removes the background-color and border.

{% example html %}

This is a blank slate

Use it to provide information when no dynamic content exists.

{% endexample %}