Empty state

Borderless inside whatever holds it, so it can sit in a card without drawing a second box. Add --outline when it stands on its own.

Standing alone

An empty state is the place to put the action that ends it. A region that says only “nothing here” leaves the reader to work out what to do next.

.hui-empty

A centred empty state, borderless inside whatever holds it. Add --outline to stand it alone.

<div class="hui-empty">
  <div class="hui-empty__header">
    <div class="hui-empty__icon"><svg>…</svg></div>
    <div class="hui-empty__title">Nothing here</div>
    <div class="hui-empty__description">…</div>
  </div>
  <div class="hui-empty__content">…</div>
</div>

.hui-empty--outline

A dashed boundary, for an empty state on the page by itself.

.hui-empty__content

The actions under the header.

.hui-empty__description

Muted supporting text.

.hui-empty__header

Groups the icon, title and description 8px apart.

.hui-empty__icon

A 32px tile on --hui-muted holding a 16px glyph.

.hui-empty__title

The empty state heading, in the heading face.