Error 500 With Illustration

Fetch pattern JSON: curl https://webspire.de/patterns/error-500/with-illustration.json

with-illustration.html

<main class="ws-error-500 flex min-h-[60vh] items-center justify-center px-4 py-16">
  <div class="text-center">
    <!-- Decorative broken gear illustration -->
    <div class="mx-auto mb-6 flex items-center justify-center" aria-hidden="true">
      <svg class="h-24 w-24 text-[var(--ws-error-500-accent)]/30" fill="none" viewBox="0 0 96 96" stroke-width="1.5" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" d="M48 36a12 12 0 110 24 12 12 0 010-24z"/>
        <path stroke-linecap="round" stroke-linejoin="round" d="M43.2 18.6l-1.2-6.6h12l-1.2 6.6a2.4 2.4 0 001.8 2.8 21.6 21.6 0 015.4 3.1 2.4 2.4 0 003.2-.4l4.4-5 8.4 8.4-5 4.4a2.4 2.4 0 00-.4 3.2 21.6 21.6 0 013.1 5.4 2.4 2.4 0 002.8 1.8l6.6-1.2v12l-6.6-1.2a2.4 2.4 0 00-2.8 1.8 21.6 21.6 0 01-3.1 5.4 2.4 2.4 0 00.4 3.2l5 4.4-8.4 8.4-4.4-5a2.4 2.4 0 00-3.2-.4 21.6 21.6 0 01-5.4 3.1 2.4 2.4 0 00-1.8 2.8l1.2 6.6H42l1.2-6.6a2.4 2.4 0 00-1.8-2.8 21.6 21.6 0 01-5.4-3.1 2.4 2.4 0 00-3.2.4l-4.4 5-8.4-8.4 5-4.4a2.4 2.4 0 00.4-3.2 21.6 21.6 0 01-3.1-5.4 2.4 2.4 0 00-2.8-1.8L12 54V42l6.6 1.2a2.4 2.4 0 002.8-1.8 21.6 21.6 0 013.1-5.4 2.4 2.4 0 00-.4-3.2l-5-4.4 8.4-8.4 4.4 5a2.4 2.4 0 003.2.4 21.6 21.6 0 015.4-3.1 2.4 2.4 0 001.8-2.8z"/>
        <!-- Crack/break lines (decorative) -->
        <line x1="40" y1="40" x2="32" y2="28" stroke-width="2" class="text-red-400" stroke="currentColor"/>
        <line x1="56" y1="56" x2="64" y2="68" stroke-width="2" class="text-red-400" stroke="currentColor"/>
        <line x1="32" y1="28" x2="28" y2="24" stroke-width="2" class="text-red-400" stroke="currentColor"/>
      </svg>
    </div>

    <p class="text-7xl font-black tracking-tight text-[var(--ws-error-500-accent)]/20" aria-hidden="true">500</p>
    <h1 class="mt-2 text-2xl font-bold text-[var(--ws-error-500-text)]">Internal Server Error</h1>
    <p class="mx-auto mt-3 max-w-md text-sm text-[var(--ws-error-500-text-soft)]">Something broke behind the scenes. Our engineers have been alerted and are working on a fix. Please try again shortly.</p>
    <div class="mt-8 flex items-center justify-center gap-3">
      <a href="/" class="rounded-md bg-[var(--ws-error-500-action-bg)] px-4 py-2 text-sm font-medium text-[var(--ws-error-500-action-text)] transition-colors hover:opacity-90">Go Home</a>
      <button type="button" onclick="location.reload()" class="rounded-md border border-[var(--ws-color-border)] bg-[var(--ws-error-500-bg)] px-4 py-2 text-sm font-medium text-[var(--ws-error-500-text-soft)] transition-colors hover:opacity-80">Try Again</button>
    </div>
  </div>
</main>

Details

Family

error-500

Tier

enhanced

Kind

component

Extends

error-500/base

Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste

Stable Published

error500server-errorillustrationdecorative

Slots

Name	Required	Description
illustration	No	Decorative SVG illustration above the error text.
statusCode	Yes	Gradient-styled decorative status code.
heading	Yes	Error heading text.
description	No	Explanation message.
actions	Yes	Navigation buttons.

An enhanced 500 error page featuring a broken gear SVG illustration and a gradient-styled status code. Adds visual polish to the base error page while keeping the same functional layout with heading, description, and action buttons.