1
1
mirror of https://github.com/primer/css.git synced 2024-09-20 13:17:29 +03:00
css/docs/blankslate.md
2015-03-28 16:32:16 -04:00

2.1 KiB

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 .mega-octicons as the first elements in the blank slate. Be sure to use relevant icons.

{% 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 %}

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 %}