404 pages
Whole 404 and maintenance pages on the NotFound section, from a centred apology to a split with a photo and a site search.
Last updated
Each example is a complete page built on the NotFound
section: a status line, a heading, a way back and, where it helps, a site
search or a few places to go next. Astro serves src/pages/404.astro for
missing pages, so render one there:
npx @ava-ui/apogee add not-found/help-links---
// src/pages/404.astro
import Layout from '../layouts/Layout.astro'
import NotFound from '../components/apogee/pages/not-found/HelpLinks.astro'
---
<Layout title="Page not found">
<NotFound />
</Layout>
SimpleThe status, a short apology, and buttons back and home.
Help linksLeft-aligned, with a badge and three places to go next.
Icon and helpA search icon leads; help links with icons sit under the buttons.
Help cardsCentred, with a row of three cards that point somewhere useful.
SearchA site search under the heading, over a faint 404 behind the text.
Search and linksA badge, a site search, and a divided list of places to go.
Split with searchA search icon and a site search beside a photo.
Split with imageThe status, heading and buttons beside a photo.
Split with image and searchA site search beside a photo.
Split with badgeA badge, heading and buttons beside a landscape photo.
Split with search and linksA site search and three help links beside a photo.
Maintenance with mockupA maintenance notice beside a product screen built from the components.
IllustrationThe status and buttons beside a search icon in soft rings.
Maintenance with searchA maintenance notice with a site search, beside a large 503.