Empty states
What to show when there is nothing yet
First use
No projects yet
Projects keep tasks, files and people together.
Code
<div class="empty">
<div class="empty-icon"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></div><h3 class="empty-title">No projects yet</h3><p>Projects keep tasks, files and people together.</p><button type="button" class="btn btn-primary" data-dialog-open="new-create-a-project"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg>Create a project</button>
</div>No results
Nothing matches “zebra”
Check the spelling, or try fewer words.
Code
<div class="empty">
<div class="empty-icon"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></div><h3 class="empty-title">Nothing matches “zebra”</h3><p>Check the spelling, or try fewer words.</p><button type="reset" class="btn btn-gray" data-toast='{"title":"Cleared","text":"Everything shows again.","tone":"info"}'>Clear search</button>
</div>All done
Inbox zero
You have read everything. Enjoy the quiet.
Code
<div class="empty">
<div class="empty-icon">
<svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg>
</div>
<h3 class="empty-title">Inbox zero</h3>
<p>You have read everything. Enjoy the quiet.</p>
</div>Create a project
Optional