Empty State

Empty state pattern for when there’s no content to display.

Markup

<div class="af-empty-state">
  <div class="af-empty-state-icon">
    📭
  </div>
  <h3 class="af-empty-state-title">
    No items found
  </h3>
  <p>
    Get started by creating your first item.
  </p>
  <button class="af-btn">
    Create Item
  </button>
</div>

Live example

📭

No items found

Get started by creating your first item.

Create Item