Tabler

Source code Sponsor
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
Paweł Kuna
UI Designer
Set status Profile & account Feedback
Settings Logout

Documentation

Empty states

Empty states or blank pages are commonly used as placeholders for first-use, empty data or error screens. Their aim is to engage users when there is no content to display and that is why their design is extremely important from the point of view of the user experience of your website or app.

Default markup

Use the default empty state to engage users in the critical moments of their experience with your website or app. A good empty state screen should let users know what is happening and what they should do next as well as encourage them to take action.

No results found

Try adjusting your search or filter to find what you're looking for.

Search again 
<div class="empty">
  <div class="empty-icon"><!-- Download SVG icon from http://tabler-icons.io/i/mood-sad -->
    <!-- SVG icon code -->
  </div>
  <p class="empty-title">No results found</p>
  <p class="empty-subtitle text-muted">
    Try adjusting your search or filter to find what you're looking for.
  </p>
  <div class="empty-action">
    <a href="#" class="btn btn-primary">
      <!-- Download SVG icon from http://tabler-icons.io/i/search -->
      <!-- SVG icon code -->
      Search again
    </a>
  </div>
</div>

Empty state with illustration

Make your empty state screen more attractive and engaging by adding an illustration. Thanks to a more personalized design, you will improve your brand image and make your website or app more user friendly.

Invoices are managed from here

Try adjusting your search or filter to find what you're looking for.

New invoice 
<div class="empty">
  <div class="empty-img"><img src="..." height="128"  alt="">
  </div>
  <p class="empty-title">Invoices are managed from here</p>
  <p class="empty-subtitle text-muted">
    Try adjusting your search or filter to find what you're looking for.
  </p>
  <div class="empty-action">
    <a href="#" class="btn btn-primary">
      <!-- Download SVG icon from http://tabler-icons.io/i/plus -->
      <!-- SVG icon code -->
      New invoice
    </a>
  </div>
</div>

Empty state with header

Instead of adding an icon or illustration you can simply give the text:

404

Oops… You just found an error page

Try adjusting your search or filter to find what you're looking for.

Take me home 
<div class="empty">
  <div class="empty-header">404</div>
  <p class="empty-title">Oops… You just found an error page</p>
  <p class="empty-subtitle text-muted">
    Try adjusting your search or filter to find what you're looking for.
  </p>
  <div class="empty-action">
    <a href="#" class="btn btn-primary">
      <!-- Download SVG icon from http://tabler-icons.io/i/arrow-left -->
      <!-- SVG icon code -->
      Take me home
    </a>
  </div>
</div>