404 Page
Sourcecomponents/sections/NotFoundSection.astro
The page
A full 404 page on the same washed-image shell as the Login Page — logo top-left, an oversized code, a heading, a short line, a "back home" Button and a secondary link, with the legal bar pinned to the bottom.
Switch viewport — the page renders at each breakpoint's true size, scaled to fit. Live size shown top-right.
Built from
- Button — the primary "back home" CTA
- Inline Link — the secondary link and the legal row
Props
| Prop | Type | Default | Notes |
|---|---|---|---|
code | string | '404' | The big status code. |
title | string | 'Oh no, this page slipped away' | The heading. |
body | string | — | Supporting line under the heading. |
image | string | '/img/hero.jpg' | Full-bleed background image. |
homeHref | string | '/' | The primary "back home" button destination. |
homeLabel | string | 'Back to home' | Primary button label. |
helpHref | string | '/work-with-us' | Secondary link destination. |
helpLabel | string | 'Get in touch' | Secondary link label. |
Usage
Wire it to Astro's 404.astro. Point the button and link at real routes.
---
import NotFoundSection from '../components/sections/NotFoundSection.astro';
---
<NotFoundSection homeHref="/" helpHref="/contact" />Rules
Do
Give one clear way out — the "back home" button.
Keep the copy calm and helpful, not cute error-speak.
Don't
Stack several competing CTAs — one primary, one secondary is enough.
Blame the visitor — the link is what broke, not them.