error 404 split not-found illustration two-column error 404 not-found split illustration two-column layout split layout 404 page error page with illustration
Error Split
Fetch pattern JSON:
curl https://webspire.de/patterns/error/split.json split.html
<main class="ws-error flex min-h-screen items-center justify-center bg-[var(--ws-error-bg)] px-6 py-12">
<div class="mx-auto grid max-w-5xl items-center gap-12 lg:grid-cols-2 lg:gap-16">
<!-- Illustration / Visual Area -->
<div class="flex items-center justify-center">
<p class="select-none text-[10rem] font-black leading-none tracking-tighter text-[var(--ws-error-text)]/10 sm:text-[12rem]">404</p>
</div>
<!-- Error Message -->
<div class="text-center lg:text-left">
<p class="text-sm font-semibold uppercase tracking-widest text-[var(--ws-error-action-bg)]">Error 404</p>
<h1 class="mt-3 text-3xl font-bold text-[var(--ws-error-text)] sm:text-4xl">Page not found</h1>
<p class="mt-4 text-lg leading-relaxed text-[var(--ws-error-text-soft)]">Sorry, the page you're looking for doesn't exist or has been moved. Let's get you back on track.</p>
<div class="mt-8 flex flex-wrap justify-center gap-3 lg:justify-start">
<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>
</div>
</main>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
error404splitnot-foundillustrationtwo-column
Slots
| Name | Required | Description |
|---|---|---|
| illustration | Yes | Visual area with large 404 text or abstract graphic. |
| message | Yes | Error heading, description, and call-to-action buttons. |
| actions | Yes | Navigation buttons (home, contact support). |
Split-layout 404 page with a two-column design. Left side features a large “404” display as a visual anchor, right side contains the error message, description, and dual action buttons. Stacks vertically on mobile for a clean responsive experience. Swap the left panel content with an SVG illustration or image for a custom look.