# Empty state
> What an empty list shows: one line on what is missing, one slate line, and the one action that fills it.
- Block class: `.hs-empty`
- CSS: `components/empty-state.css` (also inside https://brand.honorsociety.org/brand.css)
- JS: none
- Status: decided
- Decision record: https://brand.honorsociety.org/decisions/components-round-2b.html
- Variants: Empty state, No results (search)
- HTML page: https://brand.honorsociety.org/components/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](/components/callout/).
- A list that has items and more to show: use [Load more](/components/load-more/) or the [Pager](/components/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.
```html
You have not published an article yet.
Your articles appear on your profile, under the Articles tab.