Empty state

What a listing shows when there is nothing to list: no events scheduled, no applications yet, no results for a search.

When to use

Any page whose main content is a list that can be empty. Say that it is empty, why if you know, and what the person can do.

When not to use

For errors or warnings. Use an alert for those.

<div class="ag-empty ag-mb-0">
  <h2 class="ag-empty__title">No events are scheduled</h2>
  <p>New events are announced here and in the <a href="#empty-example">news</a>. Past events are listed below.</p>
</div>

<div class="ag-empty ag-mb-0">
  <h2 class="ag-empty__title">You have no applications</h2>
  <p>When you apply for a service, it appears here with its progress.</p>
  <a class="ag-button ag-button--secondary" href="#empty-example">Start an application</a>
</div>

Accessibility

• The title is a heading, so people navigating by heading find out the list is empty.
• Keep it in the place the list would be, so the page structure does not change when content arrives.