38Error state
Whole-page failure. Same shape as the empty state but a solid border and a mono status code as a first-class element — the console motif applied to the failure page.
Use it for
- 404, 500, a route that threw
Not for
- Field or region errors — Field error / Alert
404
markup
<div class="ns-empty ns-error-state" role="alert" style="max-inline-size:26rem">
<p class="ns-empty__code">404</p>
<p class="ns-empty__title">Page not found</p>
<p class="ns-empty__text">That page has moved or never existed.</p>
<div class="ns-empty__action"><a class="ns-btn ns-btn--primary ns-btn--sm" href="#">Browse courses</a></div>
</div>Accessibility contract
- Always offer a route onward — a dead end is a bounce