Overview

Empty states communicate when no records exist, search queries yield no results, or users haven't yet created data, providing clear calls to action.

Card Empty State

<div class="empty-state empty-state-card">
  <div class="empty-state-icon">
    <span>📦</span>
  </div>
  <h3 class="empty-state-title"><span>No projects found</span></h3>
  <p class="empty-state-description"><span>You haven't created any workspaces yet.</span></p>
  <div class="empty-state-actions">
    <button type="button" class="btn btn-primary"><span>+ Create Project</span></button>
  </div>
</div>

Contextual Status Variations