Skip Navigation
Within Foundations

Error Handling

Error handling is the process of capturing problems within an application and displaying to the user what the problem is in terms they can understand. There are many ways to display to the user a problem has occured that cary by context and severity.

Alert Banner (Toast Message)

An alert banner (or toast message) is a small popup that catches the user's eye and alerts them to an issue that has or might come up. These may include some interaction by the user to confirm a selection. They are dismissable if the user no longer wishes to see them.

Not Authorized Page

401 image

Oops! Something went wrong.

<section class="uscb-error-page-container">
<div class="uscb-layout-column uscb-layout-align-vert-center">
<img style="height: 200px" src="public-assets/img/Papers401.png" alt="401 image"></img>
<h3 class="uscb-h3 uscb-font-2x uscb-color-primary uscb-margin-T-30 uscb-padding-LR-15 uscb-text-align-center">Oops! Something went wrong.</h3>
<div class="uscb-layout-row uscb-layout-column-sm">
<button class="uscb-primary-button uscb-margin-R-gt-sm-5 uscb-width-gt-sm-180" onclick="window.history.back()">Back</button>
<button class="uscb-secondary-button uscb-margin-L-gt-sm-5 uscb-width-gt-sm-180">Login</button>
</div>
</div>
</section>

Top of Section

Not Found Page

404 icon

We're sorry, but this address does not exist.

<section class="uscb-error-page-container">
<div class="uscb-layout-column uscb-layout-align-vert-center">
<img style="height: 200px" src="public-assets/img/House404.png" alt="404 icon"></img>
<h3 class="uscb-h3 uscb-color-primary uscb-margin-T-15 uscb-padding-LR-15 uscb-text-align-center">We're sorry, but this address does not exist.</h3>
<button class="uscb-primary-button">Explore data</button>
</div>
</section>

Top of Section

System Error Page

System Error Message

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

<section class="uscb-error-page-container">
<div class="uscb-layout-column uscb-layout-align-vert-center uscb-margin-T--10">
<i class="o-important-warning-1 uscb-color-accent uscb-font-3x"></i>
<h3 class="uscb-h3 uscb-bold uscb-margin-T-40 uscb-padding-LR-15 uscb-text-align-center">System Error Message</h3>
<p class="uscb-color-secondary-2 uscb-margin-T-0 uscb-margin-B-25 uscb-padding-LR-15 uscb-text-align-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<button class="uscb-primary-button uscb-width-gt-sm-100" onclick="window.history.back()">Back</button>
</div>
</section>

Top of Section

No Results Page

No Results Found

We couldn't find any results that matched your search.

Need help finding something?

<section class="uscb-error-page-container">
<div class="uscb-layout-column uscb-layout-align-vert-center">
<h3 class="uscb-h3 uscb-bold uscb-color-primary uscb-margin-T-0 uscb-padding-LR-15 uscb-text-align-center">No Results Found</h3>
<p class="uscb-color-secondary-2 uscb-padding-LR-15 uscb-margin-T-0 uscb-margin-B-40 uscb-text-align-center">We couldn't find any results that matched your search.</p>
<button class="uscb-primary-button">Try our advanced search</button>
<a class="uscb-font-xs uscb-margin-T-15" href="//data.census.gov">Need help finding something?</a>
</div>
</section>

Top of Section

Table Too Large Page

Sorry, that table is too large to display.

<section class="uscb-error-page-container">
<div class="uscb-layout-column uscb-layout-align-vert-center">
<h3 class="uscb-h3 uscb-bold uscb-margin-B-35 uscb-padding-LR-15 uscb-text-align-center">Sorry, that table is too large to display.</h3>
<div class="uscb-layout-row uscb-layout-column-sm uscb-layout-align-center uscb-width-100">
<button class="uscb-primary-button uscb-margin-R-gt-sm-5 uscb-width-gt-sm-180">Download table</button>
<button class="uscb-secondary-button uscb-margin-L-gt-sm-5 uscb-width-gt-sm-180">Filter results</button>
</div>
</div>
</section>
 

Top of Section
✕
Is this page helpful?
Thumbs Up Image Yes Thumbs Down Image No
✕
NO THANKS
255 characters maximum 255 characters maximum reached
✕
Thank you for your feedback.
Comments or suggestions?

Top

Back to Header