Empty state

<div class="p234-empty">
  <h3 class="p234-empty__title">Nothing found for &ldquo;canadian youth visa 2031&rdquo;</h3>
  <p class="p234-empty__body">The archive goes back about twenty months. Try a shorter phrase, or browse the visa guides.</p>
  <div class="p234-empty__actions">
    <a class="p234-btn" href="#">Browse visa guides</a>
    <a class="p234-btn p234-btn--secondary" href="#">Clear filters</a>
  </div>
</div>

<div class="p234-empty">
  <h3 class="p234-empty__title">No filings match these filters</h3>
  <p class="p234-empty__body">There are 172 equities reporting today. Widening the date range usually brings results back.</p>
  <div class="p234-empty__actions">
    <button class="p234-btn p234-btn--secondary" type="button">Reset filters</button>
  </div>
</div>

<div class="p234-empty">
  <h3 class="p234-empty__title">You have not saved anything yet</h3>
  <p class="p234-empty__body">Save an article and it appears here, on any device you sign in on.</p>
  <div class="p234-empty__actions">
    <a class="p234-btn" href="#">Today's stories</a>
  </div>
</div>

Three parts, always

1. What happened, in the reader's terms, quoting their query where there is one.
2. Why, when there is a real reason. The archive's depth, a filter that is too narrow, an account with nothing in it yet.
3. What to do next, as a control they can press.

Rules

• Always offer a way out. An empty state with no action is a dead end, and this site's whole problem is readers running out of road.
• Say something true about the data. "The archive goes back about twenty months" is more useful than "Try another search".
• Distinguish "nothing matched" from "nothing here yet". They need different wording and different actions.

• Do not use it for an error. A failed request is a failure, not an empty result, and saying "no results" hides a bug.
• Do not add an illustration. The rule and the type carry it.
• Do not apologise. State the situation and move the reader on.

Empty is not the same as missing

A page with no content still returns 200 and still renders this component. A page that does not exist returns 404. Getting these the wrong way round is how a site ends up with soft 404s, which is a thing that has already happened here.