37Empty state

Three required parts: what is not here, why, and the one thing to do about it. Dashed border = "nothing here yet". An empty state with no action is a dead end.

Use it for

First-run screens, filtered-to-nothing lists, empty dashboards

Not for

Failures — Error state (solid border, status code)

Default

No courses yet

Courses you start appear here so you can pick up where you left off.

markup

<div class="ns-empty" style="max-inline-size:26rem">
  <i class="ph ph-folder-open ns-empty__icon" aria-hidden="true"></i>
  <p class="ns-empty__title">No courses yet</p>
  <p class="ns-empty__text">Courses you start appear here so you can pick up where you left off.</p>
  <div class="ns-empty__action"><button class="ns-btn ns-btn--primary ns-btn--sm">Browse courses</button></div>
</div>

Accessibility contract

If there is genuinely nothing to do, say so in the description — never leave the user to guess