Sheet 02.16 / Components · Content

EmptyState

The 404 page body: a bitten pineapple slice and the ways back as full-width rows. The copy is light and never cute twice.

CLASSb-waysDRAWNCLAUDECHECKEDBOLUOLICENSEMIT

Fig. 1 — emptystatelive, on a 768 rail

404

Error 404

Someone ate this page.

It moved, or it never existed. One of these is probably what you were after.

Home/

Components/components

Anatomy

Parts

Part	Class	Notes
Head	`.b-page-head`	The PageHead with slice.svg as its figure.
Ways	`.b-ways`	Each way back is a full-width row: name on the left, path on the right.

Markup

Code

bundle.css

<div class="b-sheet">
  <div class="b-row">
    <div class="b-rail b-pad b-page-head">
      <div>
        <span class="b-caption">Error 404</span>
        <h1 class="b-display" style="margin-top:12px">Someone ate this page.</h1>
        <p>It moved, or it never existed. One of these is probably what you were after.</p>
      </div>
      <img class="b-figure-art" src="/brand/slice.svg" alt="A pineapple slice with a bite taken out">
    </div>
  </div>
  <div class="b-row"><div class="b-rail b-ways"><a class="b-pad" href="#h"><span>Home</span><span class="b-meta">/</span></a></div></div>
  <div class="b-row"><div class="b-rail b-ways"><a class="b-pad" href="#c"><span>Components</span><span class="b-meta">/components</span></a></div></div>
</div>

Offer two or three real ways back.
Show the path each way leads to.

Don't

Make a second joke.
Hide the ways back behind a search box.