# Split with search and links

> A site search and three help links beside a photo.

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

A site search and three help links beside a photo.

Last updated October 15, 2026

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

```astro
---
/**
 * Split with search and links: A site search and three help links beside a photo.
 *
 * @page not-found
 */
import { Search, ArrowRight, FileCode, BookOpen, MessageCircle } from '@lucide/astro'
import NotFound from '@/components/apogee/sections/NotFound/NotFound.astro'
import Input from '@/components/apogee/Input/Input.astro'
import Button from '@/components/apogee/Button/Button.astro'
import Link from '@/components/apogee/Link/Link.astro'
import Image from '@/components/apogee/Image/Image.astro'

const links = [
  { title: 'Documentation', text: 'Dive in to learn all about our product.', href: '#', icon: FileCode, cta: 'Start learning' },
  { title: 'Our blog', text: 'Read the latest posts on our blog.', href: '#', icon: BookOpen, cta: 'View latest posts' },
  { title: 'Chat to support', text: 'Our friendly team is here to help.', href: '#', icon: MessageCircle, cta: 'Chat to our team' },
]
---

<NotFound fullHeight layout="split" code="404 error" heading="We lost this page" description="Sorry, the page you are looking for doesn't exist.">
  <form role="search" action="/search" method="get" class="flex w-full max-w-md flex-col gap-3 sm:flex-row">
    <Input type="search" name="q" aria-label="Search the site" placeholder="Search our site" class="flex-1">
      <Search slot="start" aria-hidden="true" />
    </Input>
    <Button type="submit" variant="outline" color="neutral">Search</Button>
  </form>
  <ul class="mt-8 flex flex-col gap-6">
    {links.map((l) => (
      <li class="flex flex-col gap-1">
        <Link href={l.href} underline="hover" class="inline-flex items-center gap-2 font-semibold">
          {l.title} <ArrowRight class="size-4 rtl:-scale-x-100" aria-hidden="true" />
        </Link>
        <p class="text-neutral-faded">{l.text}</p>
      </li>
    ))}
  </ul>
  <Image slot="media" src="https://picsum.photos/seed/apogee-404-4/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-search-links
```

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

## Accessibility

-   The page heading is the `h1`.
-   The search is a `role="search"` form that sends `q` to `/search` with GET; point `action` at your own search page.

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

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

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