Home / Snippets / UI Components /

Maintenance page

Planned outage messaging with a monospace maintenance window and links out to status.

Scheduled maintenance

We are migrating the search cluster. Reads may be briefly inconsistent; writes are paused during the cutover.

UTC 2026-04-12 02:00–04:00 · est. 120 min

Status page Home

Widely Supported

uino-js

Quick implementation

.maintenance-page-demo { width: min(42rem, 100%); margin-inline: auto; }
.maintenance-page-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
}

Prompt this to your LLM

role="status" for scheduled work, not emergencies.

Design a maintenance card.

Use classes .maintenance-page-demo and .maintenance-page-card.
Two-column row: emoji/icon box + copy. Full-width monospace window strip with UTC range.
Footer links row. role="status" on the card.

Return HTML + CSS using CSS variables.

Why this matters in 2026

Coordinated releases still need human-readable windows; pairing UTC with duration avoids timezone math errors in incident channels.

The logic

Grid keeps the icon aligned while text wraps; the window spans both columns for scanability.

Accessibility & performance

status + polite live region updates when you hydrate with real timers; static HTML stays quiet and safe.