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

Family

error

Tier

enhanced

Kind

section

Extends

error/base

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.