Split with image
The status, heading and buttons beside a photo.
Last updated
---
/**
* Split with image: The status, heading and buttons beside a 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" code="404 error" heading="Page not found" description="Sorry, the page you are looking for doesn't exist or has been moved." primaryAction={{ label: 'Take me home', href: '/' }}>
<Image slot="media" src="https://picsum.photos/seed/apogee-404-2/1200/1000" alt="" width={1200} height={1000} fit="cover" radius="xl" class="aspect-[6/5] w-full" />
</NotFound>
Show codeHide code
---
/**
* Split with image: The status, heading and buttons beside a 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" code="404 error" heading="Page not found" description="Sorry, the page you are looking for doesn't exist or has been moved." primaryAction={{ label: 'Take me home', href: '/' }}>
<Image slot="media" src="https://picsum.photos/seed/apogee-404-2/1200/1000" alt="" width={1200} height={1000} fit="cover" radius="xl" class="aspect-[6/5] w-full" />
</NotFound>Add
npx @ava-ui/apogee add not-found/split-imageThis 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.
- The photo has empty alt text: it is decoration.