Open demo

CSS code

HTML 
<footer class="fs">
  <div class="fs-in">
    <div class="fs-top">
      <div class="fs-brand"><b>Northwind</b>
        <p>Boards, reviews and release notes for teams that ship every week.</p>
        <p class="fs-pill"><i aria-hidden="true"></i> All systems operational</p></div>
      <nav class="fs-links" aria-label="Footer">
        <div><h2>Product</h2><ul><li><a href="#">Docs</a></li><li><a href="#">API reference</a></li><li><a href="#">CLI</a></li><li><a href="#">Self-hosting</a></li></ul></div>
        <div><h2>Community</h2><ul><li><a href="#">GitHub</a></li><li><a href="#">Discord</a></li><li><a href="#">Discussions</a></li><li><a href="#">Roadmap</a></li></ul></div>
      </nav>
      <div class="fs-log-col"><h2>Recent releases</h2>
        <ul class="fs-log">
          <li><code>v4.8</code><span>Subgrid support in nested boards</span></li>
          <li><code>v4.7</code><span>Faster search over 100k cards</span></li>
          <li><code>v4.6</code><span>Audit log export as CSV</span></li>
        </ul></div>
    </div>
    <div class="fs-base">
      <p>© Northwind Ltd. · v4.8.2</p>
      <nav aria-label="Legal"><ul><li><a href="#">Privacy</a></li><li><a href="#">Terms</a></li><li><a href="#">Security</a></li></ul></nav>
    </div>
  </div>
</footer>
CSS 
/* Developer-product footer: a system status pill, two link columns, a recent-releases list and the version
   in the legal bar. The status dot pulses twice on load (under 5 seconds) and not at all under reduced motion. */
.fs{background:#0d1117;color:#8b949e;padding:42px 34px 24px;border-top:1px solid #1f2530}
.fs,.fs *{box-sizing:border-box}
:where(.fs) a{color:inherit;text-decoration:none}
:where(.fs) ul{list-style:none;margin:0;padding:0}
:where(.fs) :is(p,h2){margin:0}
.fs a:focus-visible{outline:2px solid #58a6ff;outline-offset:2px}
.fs-in{max-width:1080px;margin:0 auto}
.fs-top{display:grid;grid-template-columns:1.3fr 2fr 1.4fr;gap:34px}
.fs-brand b{display:block;color:#e6edf3;font-size:1.02rem;font-weight:800;letter-spacing:-.02em}
.fs-brand p{font-size:.85rem;line-height:1.65;margin-top:8px;max-width:30ch}
.fs-pill{display:inline-flex;align-items:center;gap:8px;margin-top:14px;background:rgba(46,160,67,.14);
  border:1px solid rgba(46,160,67,.4);color:#3fb950;font-size:.78rem;font-weight:700;padding:5px 11px;border-radius:999px}
.fs-pill i{width:7px;height:7px;border-radius:50%;background:#3fb950;box-shadow:0 0 0 0 rgba(63,185,80,.7);
  animation:fs-pulse 2.4s 2}
@keyframes fs-pulse{70%{box-shadow:0 0 0 6px rgba(63,185,80,0)}100%{box-shadow:0 0 0 0 rgba(63,185,80,0)}}
.fs-links{display:grid;grid-template-columns:1fr 1fr;gap:34px}
.fs h2{color:#e6edf3;font-size:.75rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin-bottom:12px}
.fs-links ul{display:flex;flex-direction:column;gap:9px;font-size:.85rem}
.fs-links a:hover,.fs-base a:hover{color:#e6edf3}
.fs-log{display:flex;flex-direction:column;gap:11px}
.fs-log li{display:flex;gap:11px;font-size:.82rem;line-height:1.5}
.fs-log code{background:#1f2530;color:#7ee787;padding:1px 7px;border-radius:5px;font-size:.75rem;height:max-content;flex-shrink:0;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.fs-base{margin-top:34px;padding-top:20px;border-top:1px solid #1f2530;display:flex;justify-content:space-between;
  gap:16px;flex-wrap:wrap;font-size:.8rem}
.fs-base ul{display:flex;gap:18px}
@media (max-width:860px){.fs-top{grid-template-columns:1fr 1fr}.fs-log-col{grid-column:1 / -1}}
@media (max-width:560px){.fs{padding:40px 20px 24px}.fs-top{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.fs-pill i{animation:none}}

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS

HTML 
<footer class="fs">
  <div class="fs-in">
    <div class="row g-4 gx-lg-5">
      <div class="fs-brand col-md-6 col-lg-4"><b>Northwind</b>
        <p class="mt-2 mb-0">Boards, reviews and release notes for teams that ship every week.</p>
        <p class="fs-pill badge mt-3 mb-0"><i aria-hidden="true"></i> All systems operational</p></div>
      <nav class="col-md-6 col-lg-4" aria-label="Footer">
        <div class="row row-cols-2 g-4">
          <div class="col"><h2>Product</h2><ul class="nav flex-column"><li class="nav-item"><a class="nav-link" href="#">Docs</a></li><li class="nav-item"><a class="nav-link" href="#">API reference</a></li><li class="nav-item"><a class="nav-link" href="#">CLI</a></li><li class="nav-item"><a class="nav-link" href="#">Self-hosting</a></li></ul></div>
          <div class="col"><h2>Community</h2><ul class="nav flex-column"><li class="nav-item"><a class="nav-link" href="#">GitHub</a></li><li class="nav-item"><a class="nav-link" href="#">Discord</a></li><li class="nav-item"><a class="nav-link" href="#">Discussions</a></li><li class="nav-item"><a class="nav-link" href="#">Roadmap</a></li></ul></div>
        </div>
      </nav>
      <div class="col-lg-4"><h2>Recent releases</h2>
        <ul class="fs-log list-unstyled d-flex flex-column mb-0">
          <li class="d-flex"><code>v4.8</code><span>Subgrid support in nested boards</span></li>
          <li class="d-flex"><code>v4.7</code><span>Faster search over 100k cards</span></li>
          <li class="d-flex"><code>v4.6</code><span>Audit log export as CSV</span></li>
        </ul></div>
    </div>
    <div class="fs-base d-flex flex-wrap justify-content-between gap-3 mt-4 pt-3">
      <p class="mb-0">© Northwind Ltd. · v4.8.2</p>
      <nav aria-label="Legal"><ul class="nav"><li class="nav-item"><a class="nav-link" href="#">Privacy</a></li><li class="nav-item"><a class="nav-link" href="#">Terms</a></li><li class="nav-item"><a class="nav-link" href="#">Security</a></li></ul></nav>
    </div>
  </div>
</footer>
CSS 
/* Bootstrap grid, .nav.flex-column lists and a .badge status pill. The status dot pulses twice on load
   (under 5 seconds) and not at all under reduced motion. */
.fs{background:#0d1117;color:#8b949e;padding:42px 34px 24px;border-top:1px solid #1f2530}
.fs a{text-decoration:none}
.fs a:focus-visible{outline:2px solid #58a6ff;outline-offset:2px;box-shadow:none}
.fs-in{max-width:1080px;margin:0 auto}
.fs-brand b{display:block;color:#e6edf3;font-size:1.02rem;font-weight:800;letter-spacing:-.02em}
.fs-brand p{font-size:.85rem;line-height:1.65;max-width:30ch}
.fs-pill{--bs-badge-font-size:.78rem;--bs-badge-font-weight:700;--bs-badge-padding-x:11px;--bs-badge-padding-y:5px;
  --bs-badge-color:#3fb950;--bs-badge-border-radius:999px;display:inline-flex;align-items:center;gap:8px;
  background:rgba(46,160,67,.14);border:1px solid rgba(46,160,67,.4)}
.fs-pill i{width:7px;height:7px;border-radius:50%;background:#3fb950;box-shadow:0 0 0 0 rgba(63,185,80,.7);animation:fs-pulse 2.4s 2}
@keyframes fs-pulse{70%{box-shadow:0 0 0 6px rgba(63,185,80,0)}100%{box-shadow:0 0 0 0 rgba(63,185,80,0)}}
.fs h2{color:#e6edf3;font-size:.75rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin-bottom:12px;line-height:normal}
.fs .nav{--bs-nav-link-color:#8b949e;--bs-nav-link-hover-color:#e6edf3;--bs-nav-link-padding-x:0;--bs-nav-link-padding-y:0;
  --bs-nav-link-font-size:.85rem;gap:9px}
.fs-log{gap:11px}
.fs-log li{gap:11px;font-size:.82rem;line-height:1.5}
.fs-log code{background:#1f2530;color:#7ee787;padding:1px 7px;border-radius:5px;font-size:.75rem;height:max-content;flex-shrink:0}
.fs-base{border-top:1px solid #1f2530;font-size:.8rem}
.fs-base .nav{--bs-nav-link-font-size:.8rem;gap:18px}
@media (max-width:575.98px){.fs{padding:40px 20px 24px}}
@media (prefers-reduced-motion:reduce){.fs-pill i{animation:none}}

Tailwind 4 code

Requires: Tailwind CSS 4

HTML 
<footer class="border-t border-[#1f2530] bg-[#0d1117] px-5 pt-10 pb-6 text-[#8b949e] min-[561px]:px-[34px] min-[561px]:pt-[42px]">
  <div class="mx-auto max-w-[1080px]">
    <div class="grid grid-cols-1 gap-[34px] min-[561px]:grid-cols-2 min-[861px]:grid-cols-[1.3fr_2fr_1.4fr]">
      <div><b class="block text-[1.02rem] font-extrabold tracking-[-.02em] text-[#e6edf3]">Northwind</b>
        <p class="mt-2 max-w-[30ch] text-[.85rem] leading-[1.65]">Boards, reviews and release notes for teams that ship every week.</p>
        <p class="mt-3.5 inline-flex items-center gap-2 rounded-full border border-[rgba(46,160,67,.4)] bg-[rgba(46,160,67,.14)] px-[11px] py-[5px] text-[.78rem] font-bold text-[#3fb950]"><i class="size-[7px] rounded-full bg-[#3fb950] shadow-[0_0_0_0_rgba(63,185,80,.7)] animate-status-pulse motion-reduce:animate-none" aria-hidden="true"></i> All systems operational</p></div>
      <nav class="grid grid-cols-2 gap-[34px] [&_a]:hover:text-[#e6edf3] [&_a]:focus-visible:outline-2 [&_a]:focus-visible:outline-offset-2 [&_a]:focus-visible:outline-[#58a6ff]" aria-label="Footer">
        <div><h2 class="mb-3 text-[.75rem] font-extrabold tracking-[.08em] text-[#e6edf3] uppercase">Product</h2><ul class="flex flex-col gap-[9px] text-[.85rem]"><li><a href="#">Docs</a></li><li><a href="#">API reference</a></li><li><a href="#">CLI</a></li><li><a href="#">Self-hosting</a></li></ul></div>
        <div><h2 class="mb-3 text-[.75rem] font-extrabold tracking-[.08em] text-[#e6edf3] uppercase">Community</h2><ul class="flex flex-col gap-[9px] text-[.85rem]"><li><a href="#">GitHub</a></li><li><a href="#">Discord</a></li><li><a href="#">Discussions</a></li><li><a href="#">Roadmap</a></li></ul></div>
      </nav>
      <div class="min-[561px]:col-span-2 min-[861px]:col-span-1"><h2 class="mb-3 text-[.75rem] font-extrabold tracking-[.08em] text-[#e6edf3] uppercase">Recent releases</h2>
        <ul class="flex flex-col gap-[11px] [&>li]:flex [&>li]:gap-[11px] [&>li]:text-[.82rem] [&>li]:leading-[1.5] [&_code]:h-max [&_code]:shrink-0 [&_code]:rounded-[5px] [&_code]:bg-[#1f2530] [&_code]:px-[7px] [&_code]:py-px [&_code]:text-[.75rem] [&_code]:text-[#7ee787]">
          <li><code>v4.8</code><span>Subgrid support in nested boards</span></li>
          <li><code>v4.7</code><span>Faster search over 100k cards</span></li>
          <li><code>v4.6</code><span>Audit log export as CSV</span></li>
        </ul></div>
    </div>
    <div class="mt-[34px] flex flex-wrap justify-between gap-4 border-t border-[#1f2530] pt-5 text-[.8rem]">
      <p>© Northwind Ltd. · v4.8.2</p>
      <nav aria-label="Legal"><ul class="flex gap-[18px] [&_a]:hover:text-[#e6edf3] [&_a]:focus-visible:outline-2 [&_a]:focus-visible:outline-offset-2 [&_a]:focus-visible:outline-[#58a6ff]"><li><a href="#">Privacy</a></li><li><a href="#">Terms</a></li><li><a href="#">Security</a></li></ul></nav>
    </div>
  </div>
</footer>
CSS 
@theme {
  --animate-status-pulse: status-pulse 2.4s 2; /* two pulses, under 5 seconds */
  @keyframes status-pulse {
    70% { box-shadow: 0 0 0 6px rgb(63 185 80 / 0); }
    100% { box-shadow: 0 0 0 0 rgb(63 185 80 / 0); }
  }
}

About this set

A dark footer for a developer product, the kind you see on API, CLI and hosting sites. The brand column carries a green All systems operational pill with a small dot; two link columns cover Product (Docs, API reference, CLI, Self-hosting) and Community (GitHub, Discord, Discussions, Roadmap); and a Recent releases column lists the last three versions, each with a monospace version tag and a one-line note. The legal bar shows the copyright line with the current version number and links to Privacy, Terms and Security. Use it on a documentation site or developer tool where people look for status, releases and community links at the bottom of every page. The status pill is static text for you to fill from your status API. Its dot pulses twice when the page loads, under five seconds, and not at all under reduced motion. The layout goes from three columns to two, with the releases full width, and then to one on phones, while the two link columns stay side by side.

What’s included

  • Status pill with a dot that pulses twice, then stops
  • Recent releases list with monospace version tags
  • Version number in the legal bar next to the copyright line
  • Link columns stay two across even on phones
  • Bootstrap version uses .badge for the pill and .nav.flex-column lists

Accessibility

The pulsing dot is aria-hidden, so the pill reads as its text. The pulse runs twice, under five seconds, and is removed under prefers-reduced-motion. Link columns sit in a nav labelled Footer under h2 headings, the legal links in one labelled Legal, and every link shows a 2px blue outline on keyboard focus. Grey text reaches 6.1:1 on #0d1117.

Customise it

Change #0d1117 (background), #3fb950 (status green) and #7ee787 (version tags) in the .fs rules; switch the pill to amber or red for other states. In Bootstrap the pill colours are --bs-badge-* on .fs-pill; in Tailwind edit the colours in the pill utilities and the status-pulse keyframes in @theme.