Search
A site search under the heading, over a faint 404 behind the text.
Last updated
---
/**
* Search: A site search under the heading, over a faint 404 behind the text.
*
* @page not-found
*/
import { Search } 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'
---
<NotFound fullHeight back="Go back" watermark code="404" heading="We lost this page" description="The page you are looking for doesn't exist or has been moved.">
<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>
</NotFound>
Show codeHide code
---
/**
* Search: A site search under the heading, over a faint 404 behind the text.
*
* @page not-found
*/
import { Search } 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'
---
<NotFound fullHeight back="Go back" watermark code="404" heading="We lost this page" description="The page you are looking for doesn't exist or has been moved.">
<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>
</NotFound>Add
npx @ava-ui/apogee add not-found/searchThis copies the page to src/components/apogee/pages/not-found/ with everything it uses: Button, Input, 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 search is a
role="search"form that sendsqto/searchwith GET; pointactionat your own search page. - The large 404 behind the text is decoration (
aria-hidden).