Empty state

What it is

What a list shows when it has nothing in it yet: one Didot line that says what is missing, one slate line, one action that fills it.

When to use

• A member’s own list with nothing in it yet, such as their articles. It replaces .hs-blog-empty.
• Another member’s empty list: the line only, with no icon and no action.
• A search or a filter that matched nothing: --search.

When not to use

• A message after an action, or an error: use the Callout.
• A list that has items and more to show: use Load more or the Pager.

Rules

• Markup: div.hs-empty with an optional svg.hs-empty__icon, h3.hs-empty__title, p.hs-empty__text and an optional .hs-empty__actions.
• The title says what is missing, in one line. Write no apology and add no illustration.
• Give one action: the one that fills the list. It carries data-ph-capture-attribute-cta and data-ph-capture-attribute-cta-loc.
• When the viewer cannot fill the list, drop the icon and the action. The title names the member: “Avery Example hasn’t published any articles yet.”
• --search is help, not a dead end. The title says what matched nothing, with the escaped query: “No results for “nursng”.” The text gives the fix: a spelling tip and, when filters are set, a “Clear all filters” link in the text. Then p.hs-empty__links-title and ul.hs-empty__links with two to four popular destinations, each li > a.hs-empty__link: a centred, wrapping row of navy-outline pill links, 44px tall. The shared focus ring applies. No button. On the search page the title is h2: it sits right under the H1.

Accessibility

• The title is a heading, so a screen reader finds the empty list in the outline.
• The icon takes aria-hidden="true" focusable="false".
• Contrast on soft: title navy 11.7:1; text slate 5.9:1.
• The action is a real link, so it works without JavaScript.

Variants

Empty state

When the viewer cannot fill the list, drop the icon and the action.

<div class="hs-empty">
  <svg class="hs-empty__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4 20h4L19 9a2.8 2.8 0 0 0-4-4L4 16v4z"/><path d="M13.5 6.5l4 4"/></svg>
  <h3 class="hs-empty__title">You have not published an article yet.</h3>
  <p class="hs-empty__text">Your articles appear on your profile, under the Articles tab.</p>
  <div class="hs-empty__actions">
    <a class="hs-button" href="/blog/new" data-ph-capture-attribute-cta="start_article" data-ph-capture-attribute-cta-loc="member-articles">Write an article</a>
  </div>
</div>

No results (search)

A search that matched nothing: the fix, then popular destinations.

<div class="hs-empty hs-empty--search">
  <h2 class="hs-empty__title">No results for &ldquo;nursng&rdquo;.</h2>
  <p class="hs-empty__text">Check the spelling or try a shorter word. You can also <a href="/search/node">clear all filters</a>.</p>
  <p class="hs-empty__links-title">Popular pages</p>
  <ul class="hs-empty__links">
    <li><a class="hs-empty__link" href="/scholarship-directory" data-ph-capture-attribute-cta="scholarship-directory" data-ph-capture-attribute-cta-loc="no-results">Scholarship directory</a></li>
    <li><a class="hs-empty__link" href="/benefits" data-ph-capture-attribute-cta="benefits" data-ph-capture-attribute-cta-loc="no-results">Member benefits</a></li>
    <li><a class="hs-empty__link" href="/faqs" data-ph-capture-attribute-cta="faqs" data-ph-capture-attribute-cta-loc="no-results">Frequently asked questions</a></li>
  </ul>
</div>