A 404 page is a landing page that tells your site viewers the requested page is unavailable or, in some cases, doesn't exist.

Where this element can be seen?

This page can be seen when the not existing route was requested, or due to some errors which lead to a non-existing page response.

How should this element be designed?

There are different possibilities to design this page, by default, there is a hardcoded message with the information that that page can not be found and with a button that redirects to the homepage.

<aside> ℹ️ Usually, styling this element takes from-to: 3-5h

</aside>

404 page

However very often 404 pages can have some CMS content and/or FE build content with links to some popular categories, search input, etc.

How the design may look like?

Design example 1

Design example 2

Design example 3

How to develop styles for this element?

Theme the NoMatch route.

Some designs are adding CMS block to NoMatch page therefore full scope should be discussed with PM and TL if not already.

How the implementation may look like?

Implementation example #1