Library · Content Sections

Content / 404 Not Found

Friendly 404 section — large code, message, optional site-search, and quick links back into the site. Works without JS. Tone via the shared contract.

Figma: Content / 404 Not Found ↗

Live preview — edit theme bottom-right

---
import State404 from "../components/figma/State404.astro";
---
<State404
  searchAction="/search"
  tone="base-100"
  links={[
    { label: "Back to home", href: "/" },
    { label: "Browse projects", href: "/projects" },
    { label: "Contact us", href: "/contact" },
  ]}
/>

Props

Name	Type	Required	Description
`code`	`string;`	—	Large code / label (default: '404')
`heading`	`string;`	—	Heading (default: 'Page not found')
`message`	`string;`	—	Supporting message
`searchAction`	`string;`	—	Optional site-search submit URL (renders a search field when set)
`links`	`QuickLink[];`	—	Quick links back into the site
`tone`	`"base-100" \| "base-200" \| "base-300" \| "primary" \| "secondary" \| "neutral";`	—	Background tone — the Figma colour-variant axis

Example with all props

<State404
  searchAction="/search"
  links={[
    { label: "Back to home", href: "/" },
    { label: "Browse projects", href: "/projects" },
  ]}
/>