Empty States

No data in page when searching

When the user searches for something and it doesn't yield any results, the following screen will be displayed.

<div class="pat-empty-state">
    <div class="pat-empty-state__icon"><i class="far fa-file"></i></div>
    <div class="pat-empty-state__title">No Items Found</div>
    Try adjusting your search criteria to find what you are looking for.
</div>

No data in table

When the user gets an empty table the following screen will be displayed. Always provide an action that the user can do from this screen. In this example the user can create a new record.

<div class="pat-empty-state">
    <div class="pat-empty-state__icon"><i class="far fa-file"></i></div>
    <div class="pat-empty-state__title">No Records</div>
    This table doesn't have any records. 
    <a href="#">Create a New Record</a>
</div>

No data in a cell within a table

Inside a table when the cell is empty always show a dash '-'. This means that the cell doesn't have any data in it and the user will instantly recognize that.