# Split with badge

> A badge, heading and buttons beside a landscape photo.

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

A badge, heading and buttons beside a landscape photo.

Last updated October 15, 2026

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

```astro
---
/**
 * Split with badge: A badge, heading and buttons beside a landscape photo.
 *
 * @page not-found
 */
import NotFound from '@/components/apogee/sections/NotFound/NotFound.astro'
import Image from '@/components/apogee/Image/Image.astro'
---

<NotFound fullHeight back="Go back" layout="split" codeStyle="badge" code="404 error" heading="Page not found" description="Sorry, the page you are looking for doesn't exist. Here are some helpful links:">
  <Image slot="media" src="https://picsum.photos/seed/apogee-404-mountain/1200/1000" alt="" width={1200} height={1000} fit="cover" radius="xl" class="aspect-[6/5] w-full" />
</NotFound>
```

## Add

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

This copies the page to `src/components/apogee/pages/not-found/` with everything it uses: Image, 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.

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

ImageA responsive, lazy-loaded image — wraps astro:assets Image with sensible defaults.

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