Open demo

CSS code

HTML 
<main class="mt">
  <div class="mt-card">
    <section class="mt-main" aria-labelledby="mt-title">
      <p class="mt-brand"><svg width="28" height="28" viewBox="0 0 28 28" aria-hidden="true"><rect width="28" height="28" rx="7" fill="#0f172a"/><path d="M8 20V8m0 12h12M12 16l3-3 2.5 2.5L21 11" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>Ledgerly</p>
      <p class="mt-badge"><span class="mt-dot" aria-hidden="true"></span>Scheduled maintenance in progress</p>
      <h1 class="mt-title" id="mt-title">We are moving your invoices to a faster database</h1>
      <p class="mt-lead">The web app is paused while we migrate. Your data is backed up, payment links keep working, and nothing you saved before 02:00 UTC is affected.</p>
      <dl class="mt-eta">
        <div><dt>Started</dt><dd>02:00 UTC</dd></div>
        <div><dt>Back by</dt><dd>04:00 UTC</dd></div>
        <div><dt>Window</dt><dd>2 hours</dd></div>
      </dl>
      <ol class="mt-steps" aria-label="Maintenance steps">
        <li class="is-done"><span class="mt-ic" aria-hidden="true"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12.5 4.5 4.5L19 7.5"/></svg></span>Backups taken and verified<span class="mt-state">Done</span></li>
        <li class="is-now"><span class="mt-ic" aria-hidden="true"></span>Migrating 1.4 million invoice records<span class="mt-state">In progress</span></li>
        <li class="is-next"><span class="mt-ic" aria-hidden="true"></span>Checks and cache warm-up<span class="mt-state">Up next</span></li>
      </ol>
    </section>
    <aside class="mt-side" aria-labelledby="mt-status-title">
      <h2 id="mt-status-title">Service status</h2>
      <p>Updated every 15 minutes</p>
      <ul class="mt-status">
        <li>Web app<span class="mt-pill warn">Maintenance</span></li>
        <li>Mobile apps<span class="mt-pill warn">Maintenance</span></li>
        <li>Public API<span class="mt-pill info">Read-only</span></li>
        <li>Payment links<span class="mt-pill ok">Operational</span></li>
        <li>Email receipts<span class="mt-pill ok">Operational</span></li>
      </ul>
      <p class="mt-help">Urgent billing question? Write to <a href="mailto:[email protected]">[email protected]</a>. We reply within 30 minutes during the window.</p>
    </aside>
  </div>
  <p class="mt-foot">Live updates on <a href="#">status.ledgerly.app</a></p>
</main>
CSS 
/* Scheduled maintenance page: what is happening, when it ends, and which parts of the service still work. */
.mt{--mt-bg:#eef2f6;--mt-card:#fff;--mt-ink:#0f172a;--mt-muted:#475569;--mt-line:#e2e8f0;--mt-accent:#1d4ed8;
  --mt-ok:#166534;--mt-ok-bg:#dcfce7;--mt-warn:#92400e;--mt-warn-bg:#fef3c7;--mt-info:#1e40af;--mt-info-bg:#dbeafe;
  line-height:1.5;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:40px 20px;
  color:var(--mt-ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:radial-gradient(#cbd5e1 1px,transparent 1.5px) 0 0/22px 22px,var(--mt-bg)}
.mt a{color:var(--mt-accent);font-weight:600}
.mt a:focus-visible{outline:2px solid var(--mt-accent);outline-offset:3px;border-radius:2px}
.mt-card{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);width:100%;max-width:980px;overflow:hidden;
  background:var(--mt-card);border:1px solid var(--mt-line);border-radius:22px;box-shadow:0 30px 60px -30px rgba(15,23,42,.25)}
.mt-main{padding:clamp(26px,4.5vw,48px)}
.mt-brand{display:flex;align-items:center;gap:10px;margin:0 0 28px;font-weight:800;letter-spacing:-.02em}
.mt-badge{display:inline-flex;align-items:center;gap:8px;margin:0 0 16px;padding:5px 12px;font-size:.78rem;font-weight:700;
  color:var(--mt-warn);background:var(--mt-warn-bg);border-radius:999px}
.mt-dot{position:relative;width:8px;height:8px;border-radius:50%;background:#d97706}
.mt-dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:inherit;animation:mt-pulse 1.8s ease-out infinite}
@keyframes mt-pulse{to{transform:scale(2.8);opacity:0}}
.mt-title{margin:0 0 12px;font-size:clamp(1.7rem,3.6vw,2.4rem);line-height:1.12;letter-spacing:-.03em}
.mt-lead{margin:0 0 26px;line-height:1.6;color:var(--mt-muted)}
.mt-eta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin:0 0 26px;overflow:hidden;background:var(--mt-line);border:1px solid var(--mt-line);border-radius:14px}
.mt-eta div{padding:12px 14px;background:#f8fafc}
.mt-eta dt{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mt-muted)}
.mt-eta dd{margin:4px 0 0;font-size:1.05rem;font-weight:700;font-variant-numeric:tabular-nums}
.mt-steps{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.mt-steps li{display:grid;grid-template-columns:26px 1fr auto;align-items:center;gap:12px;font-size:.95rem}
.mt-ic{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;border:2px solid #94a3b8;color:#fff}
.mt-steps .is-done .mt-ic{background:var(--mt-ok);border-color:var(--mt-ok)}
.mt-steps .is-now .mt-ic{border-color:var(--mt-accent);border-right-color:transparent;animation:mt-spin 1s linear infinite}
@keyframes mt-spin{to{transform:rotate(360deg)}}
.mt-steps .is-next{color:var(--mt-muted)}
.mt-state{font-size:.8rem;font-weight:600;color:var(--mt-muted)}
.mt-side{padding:clamp(24px,4vw,40px);background:#f8fafc;border-left:1px solid var(--mt-line)}
.mt-side h2{margin:0 0 4px;font-size:1rem}
.mt-side > p{margin:0 0 18px;font-size:.88rem;color:var(--mt-muted)}
.mt-status{list-style:none;margin:0 0 22px;padding:0;border:1px solid var(--mt-line);border-radius:14px;background:#fff}
.mt-status li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;font-size:.92rem}
.mt-status li + li{border-top:1px solid var(--mt-line)}
.mt-pill{flex:none;display:inline-flex;align-items:center;gap:6px;padding:3px 10px;font-size:.75rem;font-weight:700;border-radius:999px}
.mt-pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.mt-pill.ok{color:var(--mt-ok);background:var(--mt-ok-bg)}
.mt-pill.warn{color:var(--mt-warn);background:var(--mt-warn-bg)}
.mt-pill.info{color:var(--mt-info);background:var(--mt-info-bg)}
.mt-help{margin:0;font-size:.88rem;line-height:1.6;color:var(--mt-muted)}
.mt-foot{margin:0;font-size:.85rem;color:var(--mt-muted);text-align:center}
@media (max-width:767.98px){.mt-card{grid-template-columns:1fr}.mt-side{border-left:0;border-top:1px solid var(--mt-line)}}
@media (max-width:480px){.mt-eta{grid-template-columns:1fr 1fr}.mt-eta div:last-child{grid-column:1/-1}}
@media (prefers-reduced-motion:reduce){.mt-dot::after,.mt-steps .is-now .mt-ic{animation:none}}

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS

HTML 
<main class="mt d-flex flex-column align-items-center justify-content-center gap-4">
  <div class="mt-card card w-100 overflow-hidden">
    <div class="row g-0">
      <section class="mt-main col-md-7" aria-labelledby="mt-title">
        <p class="d-flex align-items-center gap-2 fw-bolder mb-4"><svg width="28" height="28" viewBox="0 0 28 28" aria-hidden="true"><rect width="28" height="28" rx="7" fill="#0f172a"/><path d="M8 20V8m0 12h12M12 16l3-3 2.5 2.5L21 11" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>Ledgerly</p>
        <p class="mt-badge badge rounded-pill d-inline-flex align-items-center gap-2 mb-3"><span class="mt-dot" aria-hidden="true"></span>Scheduled maintenance in progress</p>
        <h1 class="mt-title fw-bold mb-3" id="mt-title">We are moving your invoices to a faster database</h1>
        <p class="text-body-secondary mb-4">The web app is paused while we migrate. Your data is backed up, payment links keep working, and nothing you saved before 02:00 UTC is affected.</p>
        <dl class="mt-eta overflow-hidden mb-4">
          <div><dt class="fw-bold text-uppercase text-body-secondary">Started</dt><dd class="fw-bold mt-1 mb-0">02:00 UTC</dd></div>
          <div><dt class="fw-bold text-uppercase text-body-secondary">Back by</dt><dd class="fw-bold mt-1 mb-0">04:00 UTC</dd></div>
          <div><dt class="fw-bold text-uppercase text-body-secondary">Window</dt><dd class="fw-bold mt-1 mb-0">2 hours</dd></div>
        </dl>
        <ol class="mt-steps list-unstyled d-grid gap-3 m-0" aria-label="Maintenance steps">
          <li class="d-flex align-items-center gap-3"><span class="mt-ic done" aria-hidden="true"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12.5 4.5 4.5L19 7.5"/></svg></span><span class="flex-grow-1">Backups taken and verified</span><span class="small fw-semibold text-body-secondary">Done</span></li>
          <li class="d-flex align-items-center gap-3"><span class="spinner-border flex-shrink-0" aria-hidden="true"></span><span class="flex-grow-1">Migrating 1.4 million invoice records</span><span class="small fw-semibold text-body-secondary">In progress</span></li>
          <li class="d-flex align-items-center gap-3 text-body-secondary"><span class="mt-ic" aria-hidden="true"></span><span class="flex-grow-1">Checks and cache warm-up</span><span class="small fw-semibold">Up next</span></li>
        </ol>
      </section>
      <aside class="mt-side col-md-5" aria-labelledby="mt-status-title">
        <h2 class="fs-6 fw-bold mb-1" id="mt-status-title">Service status</h2>
        <p class="small text-body-secondary mb-3">Updated every 15 minutes</p>
        <ul class="list-group mb-4">
          <li class="list-group-item d-flex justify-content-between align-items-center gap-3">Web app<span class="mt-pill warn badge rounded-pill d-inline-flex align-items-center gap-1">Maintenance</span></li>
          <li class="list-group-item d-flex justify-content-between align-items-center gap-3">Mobile apps<span class="mt-pill warn badge rounded-pill d-inline-flex align-items-center gap-1">Maintenance</span></li>
          <li class="list-group-item d-flex justify-content-between align-items-center gap-3">Public API<span class="mt-pill info badge rounded-pill d-inline-flex align-items-center gap-1">Read-only</span></li>
          <li class="list-group-item d-flex justify-content-between align-items-center gap-3">Payment links<span class="mt-pill ok badge rounded-pill d-inline-flex align-items-center gap-1">Operational</span></li>
          <li class="list-group-item d-flex justify-content-between align-items-center gap-3">Email receipts<span class="mt-pill ok badge rounded-pill d-inline-flex align-items-center gap-1">Operational</span></li>
        </ul>
        <p class="small text-body-secondary lh-lg m-0">Urgent billing question? Write to <a href="mailto:[email protected]">[email protected]</a>. We reply within 30 minutes during the window.</p>
      </aside>
    </div>
  </div>
  <p class="small text-body-secondary text-center m-0">Live updates on <a href="#">status.ledgerly.app</a></p>
</main>
CSS 
/* Bootstrap .card with a .row inside, .list-group for service status, .badge pills and .spinner-border for the running step. */
.mt{--mt-accent:#1d4ed8;--mt-ok:#166534;--mt-ok-bg:#dcfce7;--mt-warn:#92400e;--mt-warn-bg:#fef3c7;--mt-info:#1e40af;--mt-info-bg:#dbeafe;
  --bs-body-color:#0f172a;--bs-secondary-color:#475569;--bs-border-color:#e2e8f0;--bs-link-color-rgb:29,78,216;--bs-link-hover-color-rgb:30,64,175;
  --bs-body-font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  min-height:100dvh;padding:40px 20px;color:var(--bs-body-color);font-family:var(--bs-body-font-family);
  background:radial-gradient(#cbd5e1 1px,transparent 1.5px) 0 0/22px 22px,#eef2f6}
.mt a{font-weight:600;text-decoration:underline}
.mt a:focus-visible{outline:2px solid var(--mt-accent);outline-offset:3px;border-radius:2px;box-shadow:none}
.mt-card{max-width:980px;--bs-card-border-radius:22px;--bs-card-border-color:#e2e8f0;box-shadow:0 30px 60px -30px rgba(15,23,42,.25)}
.mt-main{padding:clamp(26px,4.5vw,48px)}
.mt-badge{--bs-badge-font-size:.78rem;--bs-badge-padding-x:12px;--bs-badge-padding-y:5px;color:var(--mt-warn);background:var(--mt-warn-bg)}
.mt-dot{position:relative;width:8px;height:8px;border-radius:50%;background:#d97706}
.mt-dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:inherit;animation:mt-pulse 1.8s ease-out infinite}
@keyframes mt-pulse{to{transform:scale(2.8);opacity:0}}
.mt-title{font-size:clamp(1.7rem,3.6vw,2.4rem);line-height:1.12;letter-spacing:-.03em}
.mt-eta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:#e2e8f0;border:1px solid #e2e8f0;border-radius:14px}
.mt-eta > div{padding:12px 14px;background:#f8fafc}
.mt-eta dt{font-size:.72rem;letter-spacing:.08em}
.mt-eta dd{font-size:1.05rem;font-variant-numeric:tabular-nums}
.mt-steps{font-size:.95rem}
.mt-ic{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;border:2px solid #94a3b8;color:#fff}
.mt-ic.done{background:var(--mt-ok);border-color:var(--mt-ok)}
.mt .spinner-border{--bs-spinner-width:26px;--bs-spinner-height:26px;--bs-spinner-border-width:2px;color:var(--mt-accent)}
.mt-side{padding:clamp(24px,4vw,40px);background:#f8fafc}
.mt .list-group{--bs-list-group-border-radius:14px;--bs-list-group-item-padding-x:14px;--bs-list-group-item-padding-y:12px;font-size:.92rem}
.mt-pill{--bs-badge-font-size:.75rem;--bs-badge-padding-x:10px;--bs-badge-padding-y:3px}
.mt-pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.mt-pill.ok{color:var(--mt-ok);background:var(--mt-ok-bg)}
.mt-pill.warn{color:var(--mt-warn);background:var(--mt-warn-bg)}
.mt-pill.info{color:var(--mt-info);background:var(--mt-info-bg)}
@media (min-width:768px){.mt-side{border-left:1px solid #e2e8f0}}
@media (max-width:767.98px){.mt-side{border-top:1px solid #e2e8f0}}
@media (max-width:480px){.mt-eta{grid-template-columns:1fr 1fr}.mt-eta > div:last-child{grid-column:1/-1}}
@media (prefers-reduced-motion:reduce){.mt-dot::after,.mt .spinner-border{animation:none}}

Tailwind 4 code

Requires: Tailwind CSS 4

HTML 
<main class="flex min-h-dvh flex-col items-center justify-center gap-[22px] bg-[radial-gradient(#cbd5e1_1px,transparent_1.5px)] bg-[#eef2f6] bg-size-[22px_22px] px-5 py-10 font-[-apple-system,BlinkMacSystemFont,'Segoe_UI',Roboto,Helvetica,Arial,sans-serif] text-mt-ink">
  <div class="grid w-full max-w-[980px] grid-cols-1 overflow-hidden rounded-[22px] border border-mt-line bg-white shadow-[0_30px_60px_-30px_rgba(15,23,42,.25)] md:grid-cols-[minmax(0,7fr)_minmax(0,5fr)]">
    <section class="p-[clamp(26px,4.5vw,48px)]" aria-labelledby="mt-title">
      <p class="mb-7 flex items-center gap-2.5 font-extrabold tracking-[-.02em]"><svg width="28" height="28" viewBox="0 0 28 28" aria-hidden="true"><rect width="28" height="28" rx="7" fill="#0f172a"/><path d="M8 20V8m0 12h12M12 16l3-3 2.5 2.5L21 11" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>Ledgerly</p>
      <p class="mb-4 inline-flex items-center gap-2 rounded-full bg-mt-warn-bg px-3 py-[5px] text-[.78rem] font-bold text-mt-warn"><span class="relative size-2 rounded-full bg-amber-600" aria-hidden="true"><span class="absolute inset-0 animate-ping rounded-full bg-amber-600 motion-reduce:animate-none"></span></span>Scheduled maintenance in progress</p>
      <h1 class="mb-3 text-[clamp(1.7rem,3.6vw,2.4rem)] leading-[1.12] font-bold tracking-[-.03em]" id="mt-title">We are moving your invoices to a faster database</h1>
      <p class="mb-[26px] leading-[1.6] text-mt-muted">The web app is paused while we migrate. Your data is backed up, payment links keep working, and nothing you saved before 02:00 UTC is affected.</p>
      <dl class="mb-[26px] grid grid-cols-2 gap-px overflow-hidden rounded-[14px] border border-mt-line bg-mt-line min-[481px]:grid-cols-3">
        <div class="bg-slate-50 px-3.5 py-3"><dt class="text-[.72rem] font-bold tracking-[.08em] text-mt-muted uppercase">Started</dt><dd class="mt-1 text-[1.05rem] font-bold tabular-nums">02:00 UTC</dd></div>
        <div class="bg-slate-50 px-3.5 py-3"><dt class="text-[.72rem] font-bold tracking-[.08em] text-mt-muted uppercase">Back by</dt><dd class="mt-1 text-[1.05rem] font-bold tabular-nums">04:00 UTC</dd></div>
        <div class="col-span-2 bg-slate-50 px-3.5 py-3 min-[481px]:col-span-1"><dt class="text-[.72rem] font-bold tracking-[.08em] text-mt-muted uppercase">Window</dt><dd class="mt-1 text-[1.05rem] font-bold tabular-nums">2 hours</dd></div>
      </dl>
      <ol class="grid gap-3 text-[.95rem]" aria-label="Maintenance steps">
        <li class="flex items-center gap-3"><span class="grid size-[26px] flex-none place-items-center rounded-full border-2 border-mt-ok bg-mt-ok text-white" aria-hidden="true"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12.5 4.5 4.5L19 7.5"/></svg></span><span class="flex-1">Backups taken and verified</span><span class="text-[.8rem] font-semibold text-mt-muted">Done</span></li>
        <li class="flex items-center gap-3"><span class="size-[26px] flex-none animate-spin rounded-full border-2 border-mt-accent border-r-transparent motion-reduce:animate-none" aria-hidden="true"></span><span class="flex-1">Migrating 1.4 million invoice records</span><span class="text-[.8rem] font-semibold text-mt-muted">In progress</span></li>
        <li class="flex items-center gap-3 text-mt-muted"><span class="size-[26px] flex-none rounded-full border-2 border-slate-400" aria-hidden="true"></span><span class="flex-1">Checks and cache warm-up</span><span class="text-[.8rem] font-semibold">Up next</span></li>
      </ol>
    </section>
    <aside class="border-t border-mt-line bg-slate-50 p-[clamp(24px,4vw,40px)] md:border-t-0 md:border-l" aria-labelledby="mt-status-title">
      <h2 class="mb-1 font-bold" id="mt-status-title">Service status</h2>
      <p class="mb-[18px] text-[.88rem] text-mt-muted">Updated every 15 minutes</p>
      <ul class="mb-[22px] divide-y divide-mt-line rounded-[14px] border border-mt-line bg-white text-[.92rem]">
        <li class="flex items-center justify-between gap-3 px-3.5 py-3">Web app<span class="inline-flex flex-none items-center gap-1.5 rounded-full bg-mt-warn-bg px-2.5 py-[3px] text-[.75rem] font-bold text-mt-warn before:size-1.5 before:rounded-full before:bg-current">Maintenance</span></li>
        <li class="flex items-center justify-between gap-3 px-3.5 py-3">Mobile apps<span class="inline-flex flex-none items-center gap-1.5 rounded-full bg-mt-warn-bg px-2.5 py-[3px] text-[.75rem] font-bold text-mt-warn before:size-1.5 before:rounded-full before:bg-current">Maintenance</span></li>
        <li class="flex items-center justify-between gap-3 px-3.5 py-3">Public API<span class="inline-flex flex-none items-center gap-1.5 rounded-full bg-mt-info-bg px-2.5 py-[3px] text-[.75rem] font-bold text-mt-info before:size-1.5 before:rounded-full before:bg-current">Read-only</span></li>
        <li class="flex items-center justify-between gap-3 px-3.5 py-3">Payment links<span class="inline-flex flex-none items-center gap-1.5 rounded-full bg-mt-ok-bg px-2.5 py-[3px] text-[.75rem] font-bold text-mt-ok before:size-1.5 before:rounded-full before:bg-current">Operational</span></li>
        <li class="flex items-center justify-between gap-3 px-3.5 py-3">Email receipts<span class="inline-flex flex-none items-center gap-1.5 rounded-full bg-mt-ok-bg px-2.5 py-[3px] text-[.75rem] font-bold text-mt-ok before:size-1.5 before:rounded-full before:bg-current">Operational</span></li>
      </ul>
      <p class="text-[.88rem] leading-[1.6] text-mt-muted">Urgent billing question? Write to <a class="font-semibold text-mt-accent underline focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-mt-accent" href="mailto:[email protected]">[email protected]</a>. We reply within 30 minutes during the window.</p>
    </aside>
  </div>
  <p class="text-center text-[.85rem] text-mt-muted">Live updates on <a class="font-semibold text-mt-accent underline focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-mt-accent" href="#">status.ledgerly.app</a></p>
</main>
CSS 
@theme {
  --color-mt-ink: #0f172a;
  --color-mt-muted: #475569;
  --color-mt-line: #e2e8f0;
  --color-mt-accent: #1d4ed8;
  --color-mt-ok: #166534;
  --color-mt-ok-bg: #dcfce7;
  --color-mt-warn: #92400e;
  --color-mt-warn-bg: #fef3c7;
  --color-mt-info: #1e40af;
  --color-mt-info-bg: #dbeafe;
}

About this set

A scheduled maintenance page that answers the three questions users arrive with: what is happening, when it will be back, and what still works. The demo is an invoicing app moving to a new database. On the left, an amber pulsing badge, a plain-language headline, a paragraph on what is safe, a three-cell strip with the start time, the time it will be back and the length of the window, and a checklist of steps marked Done, In progress and Up next. On the right, a service status panel lists five parts of the product with Maintenance, Read-only and Operational pills, followed by a support address and a link to the status page. Use it for planned downtime, or copy just the status panel into an incident page. It is pure HTML and CSS with no JavaScript: update the times and pills by hand or from your server. Every state is written as text next to its colour, the ETA strip is a description list, and the steps are an ordered list. The card is two columns from 768 pixels and stacks below that, with the status panel under the main message.

What’s included

  • Start time, return time and window length in a description list
  • Step list with Done, In progress and Up next written as text
  • Service status panel with Maintenance, Read-only and Operational pills
  • Pulsing badge and spinner that stop under reduced motion
  • No JavaScript; the Bootstrap version uses .list-group and .spinner-border

Accessibility

Status is never carried by colour alone: every pill and step has a text label, and the decorative dots, ticks and spinner are aria-hidden. The page uses a heading, a description list for the times, an ordered list for the steps and an aside for service status labelled by its own heading. Links show a 2px blue focus outline, all text meets 4.5:1, and the pulse and spinner animations are removed under prefers-reduced-motion.

Customise it

Pill colours are the --mt-ok, --mt-warn and --mt-info pairs on .mt (plain CSS and Bootstrap) or the --color-mt-* theme colours in Tailwind. Change the card width with max-width on .mt-card and the column split with its grid-template-columns (col-md-7 and col-md-5 in Bootstrap).