Empty state — Maintenance notice with time window

A centered maintenance notice is followed by a three-part service window. Use when temporarily unavailable content has an announced return time.

ReactHTML

1440 × 900

Open in new tab

Component.tsx58 lines

export default function EmptyStateMaintenanceWindow() {
  return (
    <section className="bg-white text-neutral-900">
      <div className="mx-auto max-w-6xl px-6 py-16 sm:py-24">
        <div className="mx-auto max-w-3xl text-center">
          <span className="inline-flex items-center rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs font-medium">
            Scheduled maintenance
          </span>
          <div className="mt-6">
            <div>
              <h1 className="text-3xl font-semibold tracking-tight text-balance sm:text-4xl">
                Content will return shortly
              </h1>
              <p className="mt-4 max-w-2xl text-lg text-pretty text-neutral-600">
                Explain which account features are temporarily unavailable.
              </p>
            </div>
          </div>
          <div className="mt-8 flex flex-wrap justify-center gap-3">
            <a
              href="#"
              className="inline-flex h-11 items-center justify-center rounded-md bg-neutral-900 px-5 text-sm font-medium text-white transition-colors hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
            >
              Check service status
            </a>
            <a
              href="#"
              className="inline-flex h-11 items-center justify-center rounded-md border border-neutral-300 bg-white px-5 text-sm font-medium text-neutral-900 transition-colors hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
            >
              Contact support
            </a>
          </div>
        </div>
        <dl className="mt-12 grid gap-6 border-y border-neutral-200 py-8 text-center sm:grid-cols-3">
          <div>
            <dt className="text-sm text-neutral-500">Started</dt>
            <dd className="mt-3 text-xl font-semibold">
              <time dateTime="2026-10-11T09:00:00Z">09:00 UTC</time>
            </dd>
          </div>
          <div>
            <dt className="text-sm text-neutral-500">Expected return</dt>
            <dd className="mt-3 text-xl font-semibold">
              <time dateTime="2026-10-11T10:00:00Z">10:00 UTC</time>
            </dd>
          </div>
          <div>
            <dt className="text-sm text-neutral-500">Affected area</dt>
            <dd className="mt-3 text-xl font-semibold">Account content</dd>
          </div>
        </dl>
        <p className="mt-6 text-center text-sm text-neutral-600">
          Short note about access to saved information during this window.
        </p>
      </div>
    </section>
  )
}

Pattern notes

When to use: Use for planned downtime with an expected return. Choose an error/retry state when no return time is known. Variations: show a date spanning midnight, include partial availability, or add a read-only access link.
Hierarchy: The maintenance badge gives status before the 30px h1. The primary status link precedes support. Times and affected area use 20px semibold values. Heading up to 6 words, lede 14 and final note 14.
Responsive: The service window becomes one column below 640px. Actions wrap centrally, and the heading grows at sm. No fixed-height notice constrains longer copy.
Layout: White section with a 1152px max-w-6xl container, 24px side gutters and 64px vertical padding, increasing to 96px at 640px. The notice uses a centered max-w-3xl introduction and centered wrapping actions. A three-column sm definition band sits 48px below, with top/bottom borders, 32px vertical padding and 24px gaps.
States: Links and controls have a 2px neutral-900 keyboard-focus outline offset by 2px. Filled actions change to neutral-700 on hover, outlined actions to neutral-50, and underlined links to neutral-600. Native form fields retain browser validation; controls describe structure and need application integration for persistence or navigation.

Desktop wireframe

┌──────────────────────────────────────────────────────────────┐
│                 [Scheduled maintenance]                      │
│               Content will return shortly                    │
│               Affected-feature explanation                   │
│            [Service status] [Contact support]                │
│Started              Expected return       Affected area      │
│09:00 UTC            10:00 UTC             Account content    │
│                 Saved information note                       │
└──────────────────────────────────────────────────────────────┘

View all

Empty state — Access required
Layout tags: stacked,icons,compact
Empty state — Centred icon with action
Layout tags: centered,icons,compact
Empty state — Empty archive with retention summary
Layout tags: split,compact,list

Empty state — Maintenance notice with time window

Pattern notes

More in Empty state

Empty state — Access required

Empty state — Centred icon with action

Empty state — Empty archive with retention summary