404 page

Full-height friendly “page missing” block: huge status code, short copy, and two actions without JavaScript.

This page drifted away

The URL may be mistyped, or the doc was archived. Try the home page or open docs search from your app shell.

Back to home Browse snippets

Widely Supported

uino-js

Quick implementation

.page-error-demo { width: min(42rem, 100%); margin-inline: auto; min-height: 14rem; }
.nf404 {
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  background: var(--card);
  padding: 2rem 1.75rem;
  text-align: center;
}
.nf404__code {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 14vw, 5.5rem);
  font-weight: 800;
  color: var(--accent);
}

Prompt this to your LLM

Semantic region, focus rings, and link-only actions.

You are building a 404 page in HTML + CSS only.

Requirements:
- Outer test hook: class "page-error-demo" on the wrapper (non-zero size).
- Inner card: .nf404 with role="region" and aria-labelledby pointing to the heading.
- Show large "404", a title, one paragraph, two links styled as primary and ghost buttons.
- Use CSS variables from the host (var(--accent), var(--card-border), var(--muted)).
- No JavaScript. Include :focus-visible outlines on interactive elements.

Return HTML + CSS.

Why this matters in 2026

Dead links still happen after migrations and renames. A calm, typographic 404 reduces bounce rate and keeps users oriented without a stack trace.

The logic

The oversized numeral sells the state instantly; supporting copy stays short so keyboard users reach actions quickly.

Accessibility & performance

Decorative code can be aria-hidden; the real title is the only landmark heading inside the region. No images means zero LCP surprises.