Jazz

Empty State

A placeholder shown when there is no content to display, built with the .empty class.

Default

No items yet

There's nothing here. Add something to get started.

<div class="empty">
  <svg><!-- icon --></svg>
  <h3>No items yet</h3>
  <p>There's nothing here. Add something to get started.</p>
</div>

With action

Add a button or link to give the user a clear next step.

No documents

Create your first document to get started.

<div class="empty">
  <svg><!-- icon --></svg>
  <h3>No documents</h3>
  <p>Create your first document to get started.</p>
  <button>New document</button>
</div>

With link

Use an <a> when the action navigates somewhere.

No images uploaded

Visit the media library to upload and manage your images.

Go to media library

<div class="empty">
  <svg><!-- icon --></svg>
  <h3>No images uploaded</h3>
  <p>Visit the media library to upload and manage your images.</p>
  <a href="/media" class="button">Go to media library</a>
</div>