404 Page

Best Practices

404 pages are pages which users will see if they click an invalid URL. An invalid URL could be caused by a developer error, a copy and paste error, or other error. They are not the user’s fault.

When writing 404 Page, keep the following in mind:

• Be clear and specific.
• Use Plain Language, not technical jargon.
• Do not blame the user.
• Avoid negative language.
• Avoid using all uppercase letters unless you are using Acronyms.
• Provide useful information.
• See Voice and Tone for more information.

Usage

Go to Internal Preview

<div class="error-display">
  <div class="container-fluid">
    <div class="row justify-content-center">
      <div class="col-lg-8 col-12">
        <div class="card">
          <div class="card-body">
            <div class="row">
              <div class="col-10 mx-auto">
                <h1 class="h2 text-primary text-center">
                  We can’t find that page.
                </h1>
                <p>We’re sorry, we can’t find the page you’re looking for. It might have been removed, changed its name, or
                  is otherwise unavailable.</p>
                <p>Go to the <a href="">dashboard</a> for a fresh start.</p>
                <div class="text-center">
                  <button type="button" class="btn btn-primary"><span class="fas fa-home mr-1" aria-hidden="true"></span>Go to the Dashboard</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Go to Public Preview

<div class="error-display">
  <div class="container-fluid">
    <div class="row justify-content-center">
      <div class="col-lg-8 col-12">
        <div class="card">
          <div class="card-body">
            <div class="row">
              <div class="col-10 mx-auto">
                <h1 class="h2 text-primary text-center">
                  We can’t find that page.
                </h1>
                <p>We’re sorry, we can’t find the page you’re looking for. It might have been removed, changed its name, or
                  is otherwise unavailable.</p>
                <p>Visit our <a href="">homepage</a> for helpful tools and resources, or <a href="">contact us</a> and we’ll
                  point you in the right direction.</p>
                <div class="text-center">
                  <button type="button" class="btn btn-primary mb-2"><span class="fas fa-home mr-1" aria-hidden="true"></span>Go to our Homepage</button>
                  <button type="button" class="btn btn-outline-ui mb-2">Contact Us</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>