Footer Status

Fetch pattern JSON: curl https://webspire.de/patterns/footer/status.json

status.html

<footer class="ws-footer border-t border-[var(--ws-footer-border)] bg-[var(--ws-footer-bg)] py-12">
  <div class="mx-auto max-w-7xl px-6">
    <!-- Status dashboard -->
    <dl class="grid gap-px overflow-hidden rounded-xl border border-[var(--ws-footer-border)] bg-[var(--ws-footer-border)] sm:grid-cols-2 lg:grid-cols-4">
      <div class="bg-[var(--ws-footer-bg)] p-5">
        <dt class="text-xs font-medium uppercase tracking-wide text-[var(--ws-footer-text-muted)]">System status</dt>
        <dd class="mt-2 flex items-center gap-2 text-sm font-semibold text-[var(--ws-footer-text)]">
          <span class="h-2.5 w-2.5 rounded-full bg-[var(--ws-color-success)]" aria-hidden="true"></span>
          All systems operational
        </dd>
      </div>
      <div class="bg-[var(--ws-footer-bg)] p-5">
        <dt class="text-xs font-medium uppercase tracking-wide text-[var(--ws-footer-text-muted)]">Support hours</dt>
        <dd class="mt-2 text-sm font-semibold text-[var(--ws-footer-text)]">Mon–Fri · 9–18 CET</dd>
      </div>
      <div class="bg-[var(--ws-footer-bg)] p-5">
        <dt class="text-xs font-medium uppercase tracking-wide text-[var(--ws-footer-text-muted)]">Avg. response</dt>
        <dd class="mt-2 text-sm font-semibold text-[var(--ws-footer-text)]">&lt; 2 hours</dd>
      </div>
      <div class="bg-[var(--ws-footer-bg)] p-5">
        <dt class="text-xs font-medium uppercase tracking-wide text-[var(--ws-footer-text-muted)]">API uptime (30d)</dt>
        <dd class="mt-2 text-sm font-semibold text-[var(--ws-footer-text)]">99.98%</dd>
      </div>
    </dl>

    <!-- Bottom bar -->
    <div class="mt-8 flex flex-col items-center justify-between gap-4 border-t border-[var(--ws-footer-border)] pt-6 sm:flex-row">
      <p class="text-sm font-semibold text-[var(--ws-footer-text)]">Webspire</p>
      <nav aria-label="Footer" class="flex gap-5 text-sm">
        <a href="#status" class="text-[var(--ws-footer-text-muted)] transition hover:text-[var(--ws-footer-link-hover)]">Status page</a>
        <a href="#support" class="text-[var(--ws-footer-text-muted)] transition hover:text-[var(--ws-footer-link-hover)]">Support</a>
        <a href="#privacy" class="text-[var(--ws-footer-text-muted)] transition hover:text-[var(--ws-footer-link-hover)]">Privacy</a>
      </nav>
      <p class="text-sm text-[var(--ws-footer-text-muted)]">&copy; 2026 Webspire</p>
    </div>
  </div>
</footer>

Details

Family

footer

Tier

enhanced

Kind

section

Extends

footer/base

Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste

Stable Published

footerstatusdashboarduptimesupporttrust

Slots

Name	Required	Description
metrics	Yes	Status cards (health, hours, response, uptime) as a definition list.
bottom	Yes	Brand, secondary links, and copyright.

Mini-dashboard footer in the Footer family. Ends the page with operational signals — health, support hours, response time, uptime — instead of a four-column link grid.