# Illustration

> The status and buttons beside a search icon in soft rings.

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

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

Last updated October 15, 2026

Live example: https://apogee.avaui.dev/examples/not-found/illustration

```astro
---
/**
 * Illustration: The status and buttons beside a search icon in soft rings.
 *
 * @page not-found
 */
import { Search } from '@lucide/astro'
import NotFound from '@/components/apogee/sections/NotFound/NotFound.astro'
import FeaturedIcon from '@/components/apogee/FeaturedIcon/FeaturedIcon.astro'
---

<NotFound fullHeight back="Go back" layout="split" code="404 error" heading="Page not found" description="Sorry, the page you are looking for doesn't exist." primaryAction={{ label: 'Take me home', href: '/' }}>
  <!-- Decoration: a search icon inside rings that fade out. -->
  <div slot="media" class="relative mx-auto grid size-72 place-items-center md:size-96" aria-hidden="true">
    {['size-full', 'size-3/4', 'size-1/2'].map((size, i) => (
      <span class:list={['absolute rounded-full border border-neutral', size]} style={`opacity: ${0.4 + i * 0.3}`} />
    ))}
    <FeaturedIcon theme="outline" color="primary" size="xlarge"><Search /></FeaturedIcon>
  </div>
</NotFound>
```

## Add

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

This copies the page to `src/components/apogee/pages/not-found/` with everything it uses: FeaturedIcon, NotFound. Render it from `src/pages/404.astro`, or use **Copy code** above.

## Accessibility

-   The page heading is the `h1`.
-   “Go back” returns to the previous page (or home when the page was opened directly). It needs JS, so it hides without it; “Take me home” always works.
-   The rings and icon are decoration (`aria-hidden`).

## 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)[

Featured iconAn icon in a tinted tile, the glyph that leads an empty state, an alert, a stat or a feature card.

](https://apogee.avaui.dev/docs/featured-icon)