Minimal footer
One line, three variants — centred, split and with a status dot.
<!-- 1. centred -->
<footer class="foot centred">
<p>© 2026 Acme. Made in Leeds.</p>
<nav aria-label="Legal">
<a href="/privacy/">Privacy</a>
<a href="/terms/">Terms</a>
<a href="/contact/">Contact</a>
</nav>
</footer>
<!-- 2. split -->
<footer class="foot split">
<p>© 2026 Acme</p>
<nav aria-label="Legal">
<a href="/privacy/">Privacy</a>
<a href="/terms/">Terms</a>
<a href="/contact/">Contact</a>
</nav>
</footer>
<!-- 3. with a status indicator -->
<footer class="foot split">
<p>© 2026 Acme</p>
<a class="status" href="/status/">
<span class="dot" aria-hidden="true"></span>
All systems normal
</a>
<nav aria-label="Legal">
<a href="/privacy/">Privacy</a>
<a href="/terms/">Terms</a>
<a href="/changelog/">Changelog</a>
</nav>
</footer>* { box-sizing: border-box; margin: 0; }
body { font: 16px/1.6 system-ui, -apple-system, sans-serif; padding: 20px; }
.foot {
max-width: 980px;
margin: 0 auto 18px;
padding: 20px 24px;
border: 1px solid #e2e7ef;
border-radius: 12px;
font-size: .86rem;
color: #8593ab;
display: flex;
gap: 14px;
align-items: center;
flex-wrap: wrap;
}
.foot nav { display: flex; gap: 18px; flex-wrap: wrap; }
.foot a { color: #8593ab; text-decoration: none; }
.foot a:hover { color: #3b4fe4; text-decoration: underline; text-underline-offset: 3px; }
/* centred: one column, everything middle-aligned */
.centred { flex-direction: column; justify-content: center; text-align: center; gap: 10px; }
/* split: copyright left, links right */
.split nav { margin-left: auto; }
/* status pill */
.status { display: inline-flex; align-items: center; gap: 7px; }
.dot {
width: 8px; height: 8px;
border-radius: 50%;
background: #1f8a5b;
box-shadow: 0 0 0 0 rgba(31, 138, 91, .5);
animation: ping 2.4s ease-out infinite;
}
@keyframes ping {
0% { box-shadow: 0 0 0 0 rgba(31, 138, 91, .5); }
70% { box-shadow: 0 0 0 7px rgba(31, 138, 91, 0); }
100% { box-shadow: 0 0 0 0 rgba(31, 138, 91, 0); }
}
@media (prefers-reduced-motion: reduce) {
.dot { animation: none; }
}
@media (max-width: 520px) {
.split { flex-direction: column; align-items: flex-start; }
.split nav { margin-left: 0; }
}How it works
Most sites do not need a footer with forty links in it. If your navigation is good and you have a sitemap, one line is enough — and it keeps the end of the page from looking like an afterthought bolted on.
margin-left: auto does the splitting. No justify-content: space-between, which would spread three items evenly and put the status pill in an odd place. Pushing one element with an auto margin keeps the others grouped.
The status dot pulses with box-shadow, not a transform. Animating a spreading shadow keeps the dot itself the same size, so it does not shift anything around it. It is also one element rather than the two that the scale-a-pseudo-element version needs.
The dot is aria-hidden and the text says the state. "All systems normal" is the information; the green dot is decoration. Someone who cannot see colour, or is using a screen reader, gets the same message.
flex-wrap, not a media query, does most of the responsive work. The single breakpoint at 520 pixels only changes the direction; below that the items would wrap anyway, just less tidily.
Accessibility notes
aria-label="Legal" distinguishes this nav from the main navigation in a screen reader's landmark list. With several <nav> elements on a page, unlabelled ones are indistinguishable.
Keep the copyright line as real text rather than an image or a CSS pseudo-element. It is legal information and it should be selectable and translatable.
Making it yours
The three variants share one base class, so pick a modifier and delete the other two. The centred version suits a personal site or a documentation page; the split one suits an application.
For a dark footer, invert the colours and drop the border. Check the link contrast — grey-on-dark links at 14 pixels fail contrast far more often than people expect.
Related templates
Check your version
Once you have edited this, the HTML validator will catch any tag you left unclosed, and the formatter will tidy the indentation. Both run in your browser.