# 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.

URL: https://apogee.avaui.dev/docs/not-found-pages
Last updated: 2026-10-15

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 October 15, 2026

Each example is a complete page built on the [NotFound](https://apogee.avaui.dev/docs/sections/not-found) 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:

```sh
npx @ava-ui/apogee add not-found/help-links
```

```astro
---
// 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>
```

[

![](https://apogee.avaui.dev/thumbs/not-found-pages__simple.light.webp)![](https://apogee.avaui.dev/thumbs/not-found-pages__simple.dark.webp)

SimpleThe status, a short apology, and buttons back and home.

](https://apogee.avaui.dev/docs/not-found-pages/simple)[

![](https://apogee.avaui.dev/thumbs/not-found-pages__help-links.light.webp)![](https://apogee.avaui.dev/thumbs/not-found-pages__help-links.dark.webp)

Help linksLeft-aligned, with a badge and three places to go next.

](https://apogee.avaui.dev/docs/not-found-pages/help-links)[

![](https://apogee.avaui.dev/thumbs/not-found-pages__icon-help.light.webp)![](https://apogee.avaui.dev/thumbs/not-found-pages__icon-help.dark.webp)

Icon and helpA search icon leads; help links with icons sit under the buttons.

](https://apogee.avaui.dev/docs/not-found-pages/icon-help)[

![](https://apogee.avaui.dev/thumbs/not-found-pages__help-cards.light.webp)![](https://apogee.avaui.dev/thumbs/not-found-pages__help-cards.dark.webp)

Help cardsCentred, with a row of three cards that point somewhere useful.

](https://apogee.avaui.dev/docs/not-found-pages/help-cards)[

![](https://apogee.avaui.dev/thumbs/not-found-pages__search.light.webp)![](https://apogee.avaui.dev/thumbs/not-found-pages__search.dark.webp)

SearchA site search under the heading, over a faint 404 behind the text.

](https://apogee.avaui.dev/docs/not-found-pages/search)[

![](https://apogee.avaui.dev/thumbs/not-found-pages__search-links.light.webp)![](https://apogee.avaui.dev/thumbs/not-found-pages__search-links.dark.webp)

Search and linksA badge, a site search, and a divided list of places to go.

](https://apogee.avaui.dev/docs/not-found-pages/search-links)[

![](https://apogee.avaui.dev/thumbs/not-found-pages__split-search.light.webp)![](https://apogee.avaui.dev/thumbs/not-found-pages__split-search.dark.webp)

Split with searchA search icon and a site search beside a photo.

](https://apogee.avaui.dev/docs/not-found-pages/split-search)[

![](https://apogee.avaui.dev/thumbs/not-found-pages__split-image.light.webp)![](https://apogee.avaui.dev/thumbs/not-found-pages__split-image.dark.webp)

Split with imageThe status, heading and buttons beside a photo.

](https://apogee.avaui.dev/docs/not-found-pages/split-image)[

![](https://apogee.avaui.dev/thumbs/not-found-pages__split-image-search.light.webp)![](https://apogee.avaui.dev/thumbs/not-found-pages__split-image-search.dark.webp)

Split with image and searchA site search beside a photo.

](https://apogee.avaui.dev/docs/not-found-pages/split-image-search)[

![](https://apogee.avaui.dev/thumbs/not-found-pages__split-badge.light.webp)![](https://apogee.avaui.dev/thumbs/not-found-pages__split-badge.dark.webp)

Split with badgeA badge, heading and buttons beside a landscape photo.

](https://apogee.avaui.dev/docs/not-found-pages/split-badge)[

![](https://apogee.avaui.dev/thumbs/not-found-pages__split-search-links.light.webp)![](https://apogee.avaui.dev/thumbs/not-found-pages__split-search-links.dark.webp)

Split with search and linksA site search and three help links beside a photo.

](https://apogee.avaui.dev/docs/not-found-pages/split-search-links)[

![](https://apogee.avaui.dev/thumbs/not-found-pages__maintenance-mockup.light.webp)![](https://apogee.avaui.dev/thumbs/not-found-pages__maintenance-mockup.dark.webp)

Maintenance with mockupA maintenance notice beside a product screen built from the components.

](https://apogee.avaui.dev/docs/not-found-pages/maintenance-mockup)[

![](https://apogee.avaui.dev/thumbs/not-found-pages__illustration.light.webp)![](https://apogee.avaui.dev/thumbs/not-found-pages__illustration.dark.webp)

IllustrationThe status and buttons beside a search icon in soft rings.

](https://apogee.avaui.dev/docs/not-found-pages/illustration)[

![](https://apogee.avaui.dev/thumbs/not-found-pages__maintenance-search.light.webp)![](https://apogee.avaui.dev/thumbs/not-found-pages__maintenance-search.dark.webp)

Maintenance with searchA maintenance notice with a site search, beside a large 503.

](https://apogee.avaui.dev/docs/not-found-pages/maintenance-search)

## Related

[

Not foundThe 404 page body; a status line, heading, description and a way back, centred, left-aligned or beside media.

](https://apogee.avaui.dev/docs/sections/not-found)[

InputA labeled text field with hint/error messaging, wired for accessibility — plus a pure-CSS floating label.

](https://apogee.avaui.dev/docs/input)