Error Page

Best Practices

When writing Error 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.
• Be sure to adjust heading levels as appropriate.

Usage

See Internal Preview

<div class="error-display error-display-internal">
  <div class="container-fluid">
    <div class="row justify-content-center align-items-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="page-title-text mb-3 text-center">
                  <span class="icon fas fa-bug text-danger me-1" aria-hidden="true"></span>Unexpected error
                </h1>
                <p>It’s not your fault. We’ve logged this and we’re going to look into it.</p>
                <p>Let us take you to the dashboard for a fresh start.</p>
                <div class="text-center">
                  <button type="button" class="btn btn-primary"><span class="icon fas fa-tachometer-alt me-1"
                      aria-hidden="true"></span>Go to our Homepage</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

See 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="page-title-text mb-3 text-center">
                  <span class="icon fas fa-exclamation-triangle text-primary-10 me-1" aria-hidden="true"></span>Something odd
                  happened
                </h1>
                <p>It’s not your fault. You didn’t cause this. We’re going to let [Agency] know that this happened and get right on it.</p>
                <p>We’re going to look into this. Let’s go ahead and take you to [this page] so you can continue working. We apologize for the inconvenience.</p>
                <div class="text-center">
                  <button type="button" class="btn btn-primary mb-2 mb-sm-0"><span class="icon fas fa-home me-1" aria-hidden="true"></span>Go
                    to our Homepage</button> <button type="button" class="btn btn-outline-ui">Contact Us</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>