Empty states

When there is nothing yet, say why, and what to do

First use

An invitation, not a blank.

No products yet

Add your first product, or import them all from a spreadsheet.

Show the code

<div class="empty">
<span class="empty-ico" aria-hidden="true">
<i class="ti ti-package">
</i>
</span>
<b>No products yet</b>
<p>Add your first product, or import them all from a spreadsheet.</p>
<a class="btn btn-primary" href="create-product.html">
<i class="ti ti-plus">
</i>Add a product</a>
</div>

No results

The search found nothing.

No results

Try another search or clear the filters.

Show the code

<div class="empty">
<span class="empty-ico" aria-hidden="true">
<i class="ti ti-search">
</i>
</span>
<b>No results</b>
<p>Try another search or clear the filters.</p>
</div>

All done

Good news, said plainly.

Nothing to approve

Every leave request and refund has been answered.

Show the code

<div class="empty">
<span class="empty-ico" aria-hidden="true">
<i class="ti ti-checks">
</i>
</span>
<b>Nothing to approve</b>
<p>Every leave request and refund has been answered.</p>
</div>