Papillon 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.
This repository is a module of the full papillon repository.
Install
This repository is distributed with npm. After installing npm, you can install papillon-blankslate
with this command.
$ npm install --save papillon-blankslate
Explorer
Check out how to use Papillon Blankslate with React 16, Webpack 4 and Babel 7 here
NPM
Get the latest papillon-blankslate here
Usage
You can import it like this.
Documentation
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
Wrap some content in the outer .blankslate
wrapper to give it the blankslate appearance.
This is a blank slate Use it to provide information when no dynamic content exists.
With Octicons
When it helps the message, include (relevant) icons in your blank slate. Add .blankslate-icon
to any .mega-octicon
s as the first elements in the blankslate, like so.
This is a blank slate Use it to provide information when no dynamic content exists.
Variations
Add an additional optional class to the .blankslate
to change its appearance.
Narrow
Narrows the blankslate container to not occupy the entire available width.
This is a blank slate Use it to provide information when no dynamic content exists.
Capped
Removes the border-radius
on the top corners.
This is a blank slate Use it to provide information when no dynamic content exists.
Spacious
Significantly increases the vertical padding.
This is a blank slate Use it to provide information when no dynamic content exists.
Large
Increases the size of the text in the blankslate
This is a blank slate Use it to provide information when no dynamic content exists.
No background
Removes the background-color
and border
.
This is a blank slate Use it to provide information when no dynamic content exists.