Empty state

The .c-empty component displays a centered “no data” placeholder: media (icon/illustration), title, description, and an optional call-to-action. Tone variants via [data-tone].

Semantic HTML

<div class="c-empty">
  <div class="c-empty__media"><svg>…</svg></div>
  <h2 class="c-empty__title">No accounts yet</h2>
  <p class="c-empty__description">
    Get started by creating your first account.
  </p>
  <div class="c-empty__actions">
    <button class="c-button" data-variant="primary">New account</button>
  </div>
</div>

Class contract