Introduction

The goal of a empty state pattern is to provide a good first impression that helps users to achieve their goals. It should be used when a view is empty because no objects exist and you want to guide the user to perform specific actions.

Example

<div class="empty">
  <div class="empty-icon">
    <!-- Import your icon hre -->
    <i class="icon"></i>
  </div> <!-- @end icon -->
  <<!-- you can use here any text you want a paragraph or title -->
  <p class="empty-title">Hello World</p>
  <!-- Short description here --> 
  <p class="empty-subtitle">. . .</p>  
  <!-- You can use here any components you want, Button or input ... -->
  <div class="empty-action">
    <button class="btn">Button</button>
  </div>
</div> <!-- @end of empty section -->               
          

SCSS

// -----------------------------------------------------------------------------
// This file contains CSS Empty.
// -----------------------------------------------------------------------------
.empty {
  background: #f7f8f9;
  border-radius: .1rem;
  color: #66758c;
  padding: 3.2rem 1.6rem;
  text-align: center;
  width: 100%;
  .empty-icon {
    margin-bottom: .8rem;
  }
  .empty-title, .empty-subtitle {
    margin: .4rem auto;
  }
  .empty-action {
    margin-top: .8rem;
  }
}