Navigation and overlays
Footer
A site footer with a brand column, link columns, a bottom row with legal text and social links, and a centered variant.
Example
Classes
8 classes. Click a name to copy it. Utilities on the same element always win over component defaults, so any of them can be adjusted with plain utility classes.
| Class | Type | What it does |
|---|---|---|
| Base | Base class of the footer. On a <footer> in the example. Sets flex display, alignment, gap, padding, text size and text color.CSS |
|
| Part | Part of the footer. On a <div> in the example. Sets grid display, grid tracks and gap.CSS |
|
| Part | Part of the footer. On a <div> in the example. Sets flex display, alignment, gap, width and grid tracks.CSS |
|
| Part | Part of the footer. On a <p> in the example. Sets margin, text size, font weight and text color.CSS |
|
| Part | Part of the footer. On an <ul> in the example. Sets flex display, alignment, gap, corner radius, transition and text color.CSS |
|
| Part | Part of the footer. On a <div> in the example. Sets flex display, alignment, gap, padding, text size and border.CSS |
|
| Part | Part of the footer. On a <div> in the example. Sets flex display, alignment, gap, grid display, width and height.CSS |
|
| Modifier | Modifier, combined with the footer class. Not used in the example above. Sets alignment, text style and gap.CSS |
Usage
Components ship inside the same stylesheet as the utilities. There is nothing else to install and no script to load: link Monsoon and write the markup.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/monsooncss">
<!-- Footer: start from the base class, then add modifiers -->
<footer class="footer"><div class="footer-grid"><div class="footer-brand"><a href="#" class="navbar-brand text-foreground"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 15a8 8 0 0 1 16 0"/><path d="M12 15v5a2 2 0 0 1-4 0"/><path d="M12 7V4"/></svg>Acme</a><p>Tools for teams that ship every day.</p></div><nav aria-label="Product"><p class="footer-title">Product</p><ul class="footer-links"><li><a href="#">Features</a></li><li><a href="#">Pricing</a></li><li><a href="#">Changelog</a></li></ul></nav><nav aria-label="Company"><p class="footer-title">Company</p><ul class="footer-links"><li><a href="#">About</a></li><li><a href="#">Careers</a></li><li><a href="#">Press</a></li></ul></nav><nav aria-label="Legal"><p class="footer-title">Legal</p><ul class="footer-links"><li><a href="#">Privacy</a></li><li><a href="#">Terms</a></li></ul></nav></div><div class="footer-bottom"><p>Copyright 2026 Acme Inc. All rights reserved.</p><div class="footer-social"><a href="#" aria-label="Website"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18"/></svg></a><a href="#" aria-label="Email"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg></a><a href="#" aria-label="Feed"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 11a9 9 0 0 1 9 9M4 4a16 16 0 0 1 16 16"/><circle cx="5" cy="19" r="1"/></svg></a></div></div></footer>Theme it with --seed on any ancestor, for example style="--seed: #0d9488", and force a scheme with class="dark" or class="light" on a wrapper.
Accessibility
- Wrap navigation in
navwith anaria-labelwhen there is more than one on the page, and mark the current link witharia-current="page". - Every interactive part shows a visible focus ring with
:focus-visible, and tone colors pair with-foregroundtokens that keep text at 4.5:1 or better in light and dark mode.