7 Pure CSS1 with JSPublished 2026-10-04Free · no sign-up
Eight footers for different kinds of sites: link columns with a brand blurb, a newsletter-first footer, a minimal one-line footer, a call-to-action band, a local business footer with contact details and hours, a mobile accordion footer, a big wordmark footer and a dense sitemap grid.
A classic footer with a brand blurb and three link columns, each a nav landmark with its own label. The columns use auto-fit grid so they wrap naturally on smaller screens, and the bottom bar holds the copyright line and legal links.
A footer that leads with a newsletter form above the link rows. The email field has a visible label, the form and links are separated by a rule, and social links are text links with clear names rather than unlabeled icons.
View code
<footer class="fn">
<form onsubmit="event.preventDefault()">
<div><h2>Stories from the studio</h2><p>One email a month. New pieces first.</p></div>
<label for="fn-e">Email</label>
<div class="row"><input id="fn-e" type="email" autocomplete="email"><button>Subscribe</button></div>
</form>
<nav aria-label="Footer"><a href="#">Shop</a><a href="#">About</a><a href="#">Stockists</a><a href="#">Instagram</a><a href="#">Pinterest</a></nav>
</footer>
The smallest useful footer: copyright on the left and three links on the right, collapsing to centred lines on phones. It suits portfolios and app pages where the main navigation already lives in the header.
A footer that opens with a bold call-to-action band, then the usual links. Ending pages with one clear next step gives readers who scrolled to the bottom somewhere to go, and the band uses the brand colour with high-contrast text.
A footer for local businesses that combines contact details in an address element, opening hours in a description list and link columns. The phone number is a tel: link and the email a mailto: link, so both work with one tap on phones.
View code
<footer class="fx">
<address><b>Bramble Bakery</b><br>14 Mill Lane, Bristol BS1 4AA<br><a href="tel:+441170000000">0117 000 0000</a><br><a href="mailto:hello@example.com">hello@example.com</a></address>
<div><h2>Opening hours</h2><dl><dt>Mon to Fri</dt><dd>7am to 4pm</dd><dt>Sat</dt><dd>8am to 2pm</dd><dt>Sun</dt><dd>Closed</dd></dl></div>
<nav aria-label="Footer"><h2>Visit</h2><ul><li><a href="#">Menu</a></li><li><a href="#">Order ahead</a></li><li><a href="#">Wholesale</a></li></ul></nav>
</footer>
On phones, long footer link groups become collapsible sections using details elements, which keeps the page short; on wide screens they open as normal columns. A tiny script sets the open state based on the screen width.
A brand-led footer with an oversized wordmark that fills the width using clamp(), set above a short row of links. The wordmark is decorative and hidden from screen readers because the brand name already appears in text in the bottom bar.
A dense footer sitemap for large stores, with five short columns of links under small headings and a back-to-top link. Each heading labels its own list, and the grid shrinks columns before wrapping so links stay in a readable order.
Wrap the footer in <footer> so it becomes the page's contentinfo landmark. If it holds several groups of links, wrap each in a <nav> with its own aria-label so screen reader users can tell them apart.
Contact details that work
Put addresses in an <address> element, phone numbers in tel: links and emails in mailto: links, so phones can call or write with one tap.
Columns that wrap
grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)) lays link columns side by side and wraps them as space runs out, without media queries.
Short pages on phones
Long footers can be collapsed into details sections on small screens, as the accordion demo does, and kept open on desktops where there is room.
Frequently asked questions
What should a footer include?
Contact details, key links, legal links such as privacy and terms, and the copyright line. Avoid stuffing it with keyword links.
Do these footers need JavaScript?
Only the mobile accordion footer, to open sections on wide screens.
Should social links be icons?
Icons are fine if each link has an accessible name. The newsletter demo uses plain text links.