A footer is where a site ends: columns of quiet links for the visitor who scrolled this far looking for something, and the small print. It has no material and no state, which is why it is a block and not a component. It is utilities, quiet links and one hairline.
Footer
<footer class="container-inline px-lg pt-3xl pb-xl bt(1) bt-solid b-line-hair fg-text-muted"> <div class="flex flex-col gap-2xl max-w(1040) mx-auto"> <div class="grid gap-2xl grid-cols(3)@container(--4xl)"> <div class="flex flex-col items-start gap-sm"> <a class="navbar-brand" href="#"> <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> <path d="M12 3a9 9 0 1 0 0 18a9 9 0 0 0 0-18M12 3a9 9 0 0 0 0 18" /> </svg>Atlas</a> <p class="m(0) max-w(260) leading-md">Every push becomes a deployment, in fourteen regions, in under a minute.</p> <span class="badge badge-success badge-dot mt-xs">All systems normal</span> </div> <div class="grid gap-xl row-gap-2xl grid-cols(2) grid-cols(4)@container(--2xl) grid-col-span(2)@container(--4xl)"> <nav class="flex flex-col gap-xs" aria-labelledby="footer-product"> <h2 class="heading heading-xs" id="footer-product">Product</h2> <a class="link link-quiet self-start" href="#">Deployments</a> <a class="link link-quiet self-start" href="#">Domains</a> <a class="link link-quiet self-start" href="#">Analytics</a> <a class="link link-quiet self-start" href="#">Firewall</a> <a class="link link-quiet self-start" href="#">Pricing</a> </nav> <nav class="flex flex-col gap-xs" aria-labelledby="footer-developers"> <h2 class="heading heading-xs" id="footer-developers">Developers</h2> <a class="link link-quiet self-start" href="#">Documentation</a> <a class="link link-quiet self-start" href="#">Command line</a> <a class="link link-quiet self-start" href="#">API reference</a> <a class="link link-quiet self-start" href="#">Status</a> <a class="link link-quiet self-start" href="#">Changelog</a> </nav> <nav class="flex flex-col gap-xs" aria-labelledby="footer-company"> <h2 class="heading heading-xs" id="footer-company">Company</h2> <a class="link link-quiet self-start" href="#">About</a> <a class="link link-quiet self-start" href="#">Customers</a> <a class="link link-quiet self-start" href="#">Careers</a> <a class="link link-quiet self-start" href="#">Blog</a> <a class="link link-quiet self-start" href="#">Contact</a> </nav> <nav class="flex flex-col gap-xs" aria-labelledby="footer-legal"> <h2 class="heading heading-xs" id="footer-legal">Legal</h2> <a class="link link-quiet self-start" href="#">Privacy</a> <a class="link link-quiet self-start" href="#">Terms</a> <a class="link link-quiet self-start" href="#">Security</a> <a class="link link-quiet self-start" href="#">Data processing</a> </nav> </div> </div> <div class="flex flex-wrap items-center justify-between gap-sm pt-lg bt(1) bt-solid b-line-hair text-xs"> <p class="m(0)">© 2026 Atlas Labs, Inc.</p> <div class="flex gap-lg"> <a class="link link-quiet" href="#">GitHub</a> <a class="link link-quiet" href="#">X</a> <a class="link link-quiet" href="#">RSS</a> </div> </div> </div></footer>Blocks are markup to copy. They take the page's own text color and size; the previews set fg-text-body text-sm on the body. Each block is a size container, so it reflows by its own width.
#What is in it
- A hairline above,
bt(1) bt-solid b-line-hair, and muted ink on everything,fg-text-muted. The footer is the quietest thing on the page. - The brand and one sentence at the start, with a status badge under them.
- Four columns of links. Two columns on a phone, four from 42rem of block:
grid-cols(2) grid-cols(4)@container(--2xl). From 56rem the brand takes one third of the row and the columns two. link link-quiet. A quiet link takes the color around it and shows its line only when touched, so forty links do not rule the page.self-startkeeps each link as wide as its word, so the empty row beside it is not a target.- The small print on its own row under a second hairline.
Each column is a <nav> named by its heading with aria-labelledby. The headings are <h2> at heading-xs: a footer stands outside every section of the page, so its columns are not under anything.
A footer is the one block that sets ink on its own root. A block takes the page's ink; this one is quieter than the page on purpose, and fg-text-muted on the <footer> is how.
#One line
For an application, or a site with little to say at the foot, one row: the copyright at the start and a few links at the end. It wraps to two lines on a phone.
One line
<footer class="container-inline px-lg py-lg bt(1) bt-solid b-line-hair text-xs fg-text-muted"> <div class="flex flex-wrap items-center justify-between gap-sm max-w(1040) mx-auto"> <p class="m(0)">© 2026 Atlas Labs, Inc.</p> <nav class="flex flex-wrap gap-lg" aria-label="Footer"> <a class="link link-quiet" href="#">Privacy</a> <a class="link link-quiet" href="#">Terms</a> <a class="link link-quiet" href="#">Status</a> <a class="link link-quiet" href="#">Contact</a> </nav> </div></footer>To keep either footer at the foot of a short page, put it in a page layout.
#Accessibility
- The block is a
<footer>. Outside<main>and any<article>, it is the page's content-info landmark; a page has one. - Several
<nav>elements need labels that differ; here each takes its column's heading. - Muted ink on the base surface meets contrast for body text in both schemes; do not go lighter for "fine print".