Error pages

Error pages are shown when the application is in a non-functioning or irregular state. They give the user information about what has happened and what they can do about it. Read more about error pages in the UX Guidelines.

Here are a the error pages we have available in VUD:

Just follow the HTML structure from the code panel to get the design for any of the above pages.

The pictograms for each error page can br downloaded here.


Access denied

Access denied page Access denied page
					
<main class="container"> <div class="row error-page align-items-center"> <div class="error-page-content col-12 col-md-6"> <h1>Access denied</h1> <p>You are trying to view a page you are not allowed to see. If you are not logged in, log in. Otherwise, check that your account should be able to view it.</p> <p class="error-page-home-link"> <a class="btn btn-primary" href="home">Go to homepage</a> </p> </div> <div class="error-page-image col-12 col-md-6"> <img src="{path-to-image}/error-access-denied.svg" alt="Access denied illustration"> </div> </div> </main>

Server maintenance

Server maintenance page Server maintenance page
					
<main class="container"> <div class="row error-page align-items-center"> <div class="error-page-content col-12 col-md-6"> <h1>Server maintenance</h1> <p>The server is undergoing scheduled maintenance. Check back later.</p> <p class="error-page-home-link"> <a class="btn btn-primary" href="home">Go to homepage</a> </p> </div> <div class="error-page-image col-12 col-md-6"> <img src="{path-to-image}/server_maintenance.svg" alt="Server maintenance illustration"> </div> </div> </main>

Page not found

Page not found page Page not found page
					
<main class="container"> <div class="row error-page align-items-center"> <div class="error-page-content col-12 col-md-6"> <h1>Page not found</h1> <p>We're sorry, the page you were looking for could not be found. It may have moved or the address may be mistyped. Follow home page link below.</p> <p class="error-page-home-link"> <a class="btn btn-primary" href="#!">Go to homepage</a> </p> </div> <div class="error-page-image col-12 col-md-6"> <img src="{path-to-image}/page_not_found.svg" alt="Page not found illustration"> </div> </div> </main>

Server down

Server down page Server down page
					
<main class="container"> <div class="row error-page align-items-center"> <div class="error-page-content col-12 col-md-6"> <h1>Server down</h1> <p>The application has run into problems and is not working as it should at the moment. We are aware of the error and will do our best to get it working again.</p> <p class="error-page-home-link"> <a class="btn btn-primary" href="home">Go to homepage</a> </p> </div> <div class="error-page-image col-12 col-md-6"> <img src="{path-to-image}/server_down.svg" alt="Server down illustration"> </div> </div> </main>

Server error

Server error page Server error page
					
<main class="container"> <div class="row error-page align-items-center"> <div class="error-page-content col-12 col-md-6"> <h1>Server error</h1> <p>We're sorry, an unexpected error has occurred and it has been logged. We will try to fix it as soon as possible.</p> <p class="error-page-home-link"> <a class="btn btn-primary" href="home">Go to homepage</a> </p> </div> <div class="error-page-image col-12 col-md-6"> <img src="{path-to-image}/server_error.svg" alt="Server error illustration"> </div> </div> </main>

Unexpected error

Unexpected error page Unexpected error page
					
<main class="container"> <div class="row error-page align-items-center"> <div class="error-page-content col-12 col-md-6"> <h1>Unexpected error</h1> <p>An error occurred while processing your request. Please try again later.</p> <p class="error-page-home-link"> <a class="btn btn-primary" href="home">Go to homepage</a> </p> </div> <div class="error-page-image col-12 col-md-6"> <img src="{path-to-image}/unexpected_error.svg" alt="Unexpected error illustration"> </div> </div> </main>