Service unavailable (503) - GovBB Design System

On this page

Show this page for planned maintenance or a service that is temporarily over capacity. Return the 503 status code, and add a Retry-After header when you know when the service returns. If you have a concrete return time, say it.

Preview

This service is temporarily unavailable

Open in new tab

<div class="govbb-official-banner">
  <div class="govbb-width-container govbb-official-banner__inner">
    <div class="govbb-official-banner__crest">
      <img
        class="govbb-official-banner__icon"
        src="/assets/images/govbb-crest.svg"
        alt=""
      />
    </div>
    <div class="govbb-official-banner__text">
      <span>Official government website</span>
      <a
        class="govbb-official-banner__link"
        href="/government/website-information/"
      >
        Learn more
      </a>
    </div>
  </div>
</div>
<header class="govbb-header">
  <div class="govbb-width-container govbb-header__inner">
    <a href="/">
      <img
        class="govbb-header__logo"
        src="/assets/images/govbb-logo.svg"
        alt="gov.bb"
      />
    </a>
  </div>
</header>
<main class="govbb-width-container govbb-main-wrapper" id="main-content">
  <h1 class="govbb-text-h1">This service is temporarily unavailable</h1>
  <p class="govbb-text-body">
    We're performing scheduled maintenance or experiencing unusually high
    traffic. This service should be back soon.
  </p>

  <h2 class="govbb-text-h3">Suggestions:</h2>
  <ul class="govbb-list govbb-list--bullet">
    <li>Try again in a few minutes</li>
    <li>Return to the homepage to access other services</li>
    <li>Contact us for urgent enquiries</li>
  </ul>

  <div class="govbb-button-group">
    <a class="govbb-button govbb-button--secondary" href="/contact/"
      >Contact us</a
    >
    <a class="govbb-button" href="/">Return to homepage</a>
  </div>
</main>
<footer class="govbb-footer">
  <div class="govbb-width-container govbb-footer__inner">
    <nav class="govbb-footer__nav" aria-label="Footer navigation">
      <ul class="govbb-footer__list">
        <li class="govbb-footer__item">
          <a class="govbb-link govbb-footer__link" href="/">Home</a>
        </li>
        <li class="govbb-footer__item">
          <a class="govbb-link govbb-footer__link" href="/cookies">
            Cookie policy
          </a>
        </li>
        <li class="govbb-footer__item">
          <a class="govbb-link govbb-footer__link" href="/terms">
            Terms &amp; conditions
          </a>
        </li>
        <li class="govbb-footer__item">
          <a class="govbb-link govbb-footer__link" href="/sitemap">Sitemap</a>
        </li>
      </ul>
    </nav>
    <hr class="govbb-footer__divider" aria-hidden="true" />
    <div class="govbb-footer__end">
      <img
        class="govbb-footer__coat"
        src="/assets/images/govbb-crest.svg"
        alt=""
      />
      <p class="govbb-footer__copy">© 2026 Government of Barbados</p>
    </div>
  </div>
</footer>

When to use this page

Use it for downtime you expect to recover from - maintenance windows, overnight batches, a spike in traffic. For an unexpected failure use the problem with the service page instead.

What to include

Say the service is temporarily unavailable, give a sense of when it will be back, and point users to other services and a contact route.