error 500 server-error error-page status error-500 server-error error-page 500 status-page server error page 500 internal server error display
Error 500 Base
Fetch pattern JSON:
curl https://webspire.de/patterns/error-500/base.json base.html
<main class="ws-error-500 flex min-h-[60vh] items-center justify-center px-4 py-16">
<div class="text-center">
<p class="text-8xl font-black text-[var(--ws-error-500-accent)]/20" aria-hidden="true">500</p>
<h1 class="-mt-4 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 went wrong on our end. Our team has been notified and we are working to fix the issue. Please try again in a few moments.</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
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
error500server-errorerror-pagestatus
Slots
| Name | Required | Description |
|---|---|---|
| statusCode | Yes | Large decorative status code number. |
| heading | Yes | Error heading text. |
| description | No | Explanation or apology message. |
| actions | Yes | Navigation buttons (Go Home, Try Again). |
A clean, centered 500 error page with a large decorative status code, heading, descriptive text, and two action buttons for navigation. Designed as a full-page fallback for server errors.