error 404 not-found page minimal error 404 not-found missing page 404 error page page not found design
Error 404 Base
Fetch pattern JSON:
curl https://webspire.de/patterns/error/base.json base.html
<main class="ws-error flex min-h-screen items-center justify-center bg-[var(--ws-error-bg)] px-6">
<div class="text-center">
<p class="text-8xl font-bold tracking-tighter text-[var(--ws-error-text)]/10 sm:text-9xl">404</p>
<h1 class="mt-4 text-2xl font-bold text-[var(--ws-error-text)] sm:text-3xl">Page not found</h1>
<p class="mt-3 text-base text-[var(--ws-error-text-soft)]">Sorry, we couldn't find the page you're looking for. It may have been moved or deleted.</p>
<div class="mt-8 flex flex-wrap justify-center gap-3">
<a href="/" class="rounded-xl bg-[var(--ws-error-action-bg)] px-5 py-3 text-sm font-semibold text-[var(--ws-error-action-text)] transition hover:opacity-90">Go home</a>
<a href="#" class="rounded-xl border border-[var(--ws-color-border)] px-5 py-3 text-sm font-semibold text-[var(--ws-error-text-soft)] transition hover:opacity-80">Contact support</a>
</div>
</div>
</main>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
error404not-foundpageminimal
Slots
| Name | Required | Description |
|---|---|---|
| code | Yes | Error code display (404, 500, etc.). |
| message | Yes | Friendly error message. |
| actions | Yes | Navigation buttons (home, support). |
Minimal, centered 404 page with a large error code, friendly message, and dual action buttons. Uses min-h-screen for full viewport height. Change the error code and message for 500, 403, or other error states.