Skip to main content

Empty state

Why there's nothing here, and the next action. Never a dead end.

CSS: css/components/empty-state.css. Classes: .al-empty, .al-empty__text, .al-empty__title.

On its own page, in English and Arabic

Anatomy​

HTML
<div class="al-empty">
  <p class="al-empty__title">No offers yet</p>
  <p class="al-empty__text">Work one out in the calculator, then save it to compare it with others.</p>
  <a class="al-button al-button--primary" href="/calc">Open the calculator</a>
</div>

Variants and sizes​

First use (explain and invite), no results (say what was searched and offer to clear filters), cleared ("All done").

States​

None.

Keyboard​

The action is the next stop.

ARIA​

Plain content; announce "No results" through a status region when it follows a search.

Right to left​

Mirrors.

Do and don't​

Do
  • Offer exactly one next action.
Don't
  • Show an illustration in place of an explanation.

Tokens​

The 11 tokens it uses

--al-border-hairline, --al-color-line-strong, --al-color-text-muted, --al-radius-sm, --al-size-measure, --al-space-3, --al-space-5, --al-space-8, --al-text-lg, --al-tracking-none, --al-weight-medium