Blank Slate

Contents

Blank Slate

Default width is 550px. Can use an h1 or h2 as the heading, h2 would be used for longer headings.

This is the heading

This is some complimentary description text

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia corporis fugit tenetur obcaecati, repellat, itaque sint doloremque nesciunt laborum voluptates error ipsum temporibus harum numquam culpa dignissimos alias, autem fuga!

<div class="blank-slate">
  <div class="slate-header">
    <h1>This is the heading</h1>
    <p>This is some complimentary description text</p>
  </div><!--/slate-header-->
  <div class="slate-body">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia corporis fugit tenetur obcaecati, repellat, itaque sint doloremque nesciunt laborum voluptates error ipsum temporibus harum numquam culpa dignissimos alias, autem fuga!</p>
  </div><!--/slate-body-->
  <div class="slate-footer">
    <button class="btn btn-success">Save</button>
    <button class="btn btn-link">Cancel</button>
  </div><!--/slate-footer-->
</div><!--/blank-slate-->

Sizes

Small

This is the heading

This is some complimentary description text

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia corporis fugit tenetur obcaecati, repellat, itaque sint doloremque nesciunt laborum voluptates error ipsum temporibus harum numquam culpa dignissimos alias, autem fuga!

<div class="blank-slate sm">
  ...
</div>

Wide

This is the heading

This is some complimentary description text

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia corporis fugit tenetur obcaecati, repellat, itaque sint doloremque nesciunt laborum voluptates error ipsum temporibus harum numquam culpa dignissimos alias, autem fuga!

<div class="blank-slate wide">
  ...
</div>

Solo heading

Add the .solo class to the heading if you don’t use any descriptive text under it.

This is a heading that's longer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia corporis fugit tenetur obcaecati, repellat, itaque sint doloremque nesciunt laborum voluptates error ipsum temporibus harum numquam culpa dignissimos alias, autem fuga!

<div class="blank-slate">
  <div class="slate-header">
    <h2 class="solo">This is a heading that's longer</h2>
  </div><!--/slate-header-->
  <div class="slate-body">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia corporis fugit tenetur obcaecati, repellat, itaque sint doloremque nesciunt laborum voluptates error ipsum temporibus harum numquam culpa dignissimos alias, autem fuga!</p>
  </div><!--/slate-body-->
  <div class="slate-footer">
    <button class="btn btn-success">Save</button>
    <button class="btn btn-link">Cancel</button>
  </div><!--/slate-footer-->
</div><!--/blank-slate-->

Solo slate-header

Sometimes a blank slate doesn’t need a .slate-body, it only needs a heading and descriptive text. In this case, just add .solo to the .slate-header.

Oh man something happened!

Here's some additional information that should help you get back on track.

<div class="blank-slate">
  <div class="slate-header solo">
    <h2>Oh man something happened!</h2>
    <p>Here's some additional information that should help you get back on track.</p>
  </div><!--/slate-header-->
</div><!--/blank-slate-->

Tiny blank slate

Slightly modified blank slate with left aligned text.

This is the heading

This is some complimentary description text

<div class="blank-slate tiny-blank-slate">
  <div class="slate-header">
    <h1>This is the heading</h1>
    <p>This is some complimentary description text</p>
  </div><!--/slate-header-->
  <div class="slate-footer">
    <button class="btn btn-success btn-large">CTA Here</button>
  </div><!--/slate-footer-->
</div><!--/blank-slate-->

Empty content area

If blank slate is a little much and you need an empty content message, this is your jam.

Getting started with your Collection

Your customers will love all the good stuff you put in here.

<div class="empty-content">
  <h2>Getting started with your Collection</h2>
  <p>Your customers will love all the good stuff you put in here.</p>
  <button class="newArticle btn btn-large">Create an Article</button>
  <button class="newCategory btn btn-large">Add a Category</button>
</div><!--/empty-content-->