Open demo

CSS code

HTML 
<div><span class="lbl">Centred footer with an icon row</span>
<footer class="fs-a">
  <p class="fs-brand">Fernhill</p>
  <p>Small-batch coffee, roasted in Bristol every Tuesday.</p>
  <ul class="fs-icons" role="list">
    <li><a class="fs-ic" href="https://www.instagram.com/fernhillcoffee/" aria-label="Fernhill Coffee on Instagram"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M7.0301.084c-1.2768.0602-2.1487.264-2.911.5634-.7888.3075-1.4575.72-2.1228 1.3877-.6652.6677-1.075 1.3368-1.3802 2.127-.2954.7638-.4956 1.6365-.552 2.914-.0564 1.2775-.0689 1.6882-.0626 4.947.0062 3.2586.0206 3.6671.0825 4.9473.061 1.2765.264 2.1482.5635 2.9107.308.7889.72 1.4573 1.388 2.1228.6679.6655 1.3365 1.0743 2.1285 1.38.7632.295 1.6361.4961 2.9134.552 1.2773.056 1.6884.069 4.9462.0627 3.2578-.0062 3.668-.0207 4.9478-.0814 1.28-.0607 2.147-.2652 2.9098-.5633.7889-.3086 1.4578-.72 2.1228-1.3881.665-.6682 1.0745-1.3378 1.3795-2.1284.2957-.7632.4966-1.636.552-2.9124.056-1.2809.0692-1.6898.063-4.948-.0063-3.2583-.021-3.6668-.0817-4.9465-.0607-1.2797-.264-2.1487-.5633-2.9117-.3084-.7889-.72-1.4568-1.3876-2.1228C21.2982 1.33 20.628.9208 19.8378.6165 19.074.321 18.2017.1197 16.9244.0645 15.6471.0093 15.236-.005 11.977.0014 8.718.0076 8.31.0215 7.0301.0839m.1402 21.6932c-1.17-.0509-1.8053-.2453-2.2287-.408-.5606-.216-.96-.4771-1.3819-.895-.422-.4178-.6811-.8186-.9-1.378-.1644-.4234-.3624-1.058-.4171-2.228-.0595-1.2645-.072-1.6442-.079-4.848-.007-3.2037.0053-3.583.0607-4.848.05-1.169.2456-1.805.408-2.2282.216-.5613.4762-.96.895-1.3816.4188-.4217.8184-.6814 1.3783-.9003.423-.1651 1.0575-.3614 2.227-.4171 1.2655-.06 1.6447-.072 4.848-.079 3.2033-.007 3.5835.005 4.8495.0608 1.169.0508 1.8053.2445 2.228.408.5608.216.96.4754 1.3816.895.4217.4194.6816.8176.9005 1.3787.1653.4217.3617 1.056.4169 2.2263.0602 1.2655.0739 1.645.0796 4.848.0058 3.203-.0055 3.5834-.061 4.848-.051 1.17-.245 1.8055-.408 2.2294-.216.5604-.4763.96-.8954 1.3814-.419.4215-.8181.6811-1.3783.9-.4224.1649-1.0577.3617-2.2262.4174-1.2656.0595-1.6448.072-4.8493.079-3.2045.007-3.5825-.006-4.848-.0608M16.953 5.5864A1.44 1.44 0 1 0 18.39 4.144a1.44 1.44 0 0 0-1.437 1.4424M5.8385 12.012c.0067 3.4032 2.7706 6.1557 6.173 6.1493 3.4026-.0065 6.157-2.7701 6.1506-6.1733-.0065-3.4032-2.771-6.1565-6.174-6.1498-3.403.0067-6.156 2.771-6.1496 6.1738M8 12.0077a4 4 0 1 1 4.008 3.9921A3.9996 3.9996 0 0 1 8 12.0077"/></svg></a></li>
    <li><a class="fs-ic" href="https://www.tiktok.com/@fernhillcoffee" aria-label="Fernhill Coffee on TikTok"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z"/></svg></a></li>
    <li><a class="fs-ic" href="https://www.facebook.com/fernhillcoffee" aria-label="Fernhill Coffee on Facebook"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036 26.805 26.805 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647Z"/></svg></a></li>
    <li><a class="fs-ic" href="https://www.youtube.com/@fernhillcoffee" aria-label="Fernhill Coffee on YouTube"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg></a></li>
    <li><a class="fs-ic" href="https://www.pinterest.com/fernhillcoffee/" aria-label="Fernhill Coffee on Pinterest"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12.017 0C5.396 0 .029 5.367.029 11.987c0 5.079 3.158 9.417 7.618 11.162-.105-.949-.199-2.403.041-3.439.219-.937 1.406-5.957 1.406-5.957s-.359-.72-.359-1.781c0-1.663.967-2.911 2.168-2.911 1.024 0 1.518.769 1.518 1.688 0 1.029-.653 2.567-.992 3.992-.285 1.193.6 2.165 1.775 2.165 2.128 0 3.768-2.245 3.768-5.487 0-2.861-2.063-4.869-5.008-4.869-3.41 0-5.409 2.562-5.409 5.199 0 1.033.394 2.143.889 2.741.099.12.112.225.085.345-.09.375-.293 1.199-.334 1.363-.053.225-.172.271-.401.165-1.495-.69-2.433-2.878-2.433-4.646 0-3.776 2.748-7.252 7.92-7.252 4.158 0 7.392 2.967 7.392 6.923 0 4.135-2.607 7.462-6.233 7.462-1.214 0-2.354-.629-2.758-1.379l-.749 2.848c-.269 1.045-1.004 2.352-1.498 3.146 1.123.345 2.306.535 3.55.535 6.607 0 11.985-5.365 11.985-11.987C23.97 5.39 18.592.026 11.985.026L12.017 0z"/></svg></a></li>
  </ul>
  <small>© 2026 Fernhill Coffee Roasters Ltd.</small>
</footer></div>
<div><span class="lbl">Split footer with handles</span>
<footer class="fs-b">
  <div><p class="fs-brand">Northline Labs</p><p>Open-source tools that make CI pipelines faster. Built in public since 2021.</p></div>
  <div><h2 id="fs-elsewhere">Elsewhere</h2>
  <ul class="fs-handles" role="list" aria-labelledby="fs-elsewhere">
    <li><a class="fs-h fs-github" href="https://github.com/northline"><span class="fs-tile"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></span><span><strong>GitHub</strong><span>github.com/northline</span></span></a></li>
    <li><a class="fs-h fs-mastodon" href="https://mas.to/@northline"><span class="fs-tile"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-4.835.242-5.288.309C3.882.692 1.496 2.518.917 5.127.64 6.412.61 7.837.661 9.143c.074 1.874.088 3.745.26 5.611.118 1.24.325 2.47.62 3.68.55 2.237 2.777 4.098 4.96 4.857 2.336.792 4.849.923 7.256.38.265-.061.527-.132.786-.213.585-.184 1.27-.39 1.774-.753a.057.057 0 0 0 .023-.043v-1.809a.052.052 0 0 0-.02-.041.053.053 0 0 0-.046-.01 20.282 20.282 0 0 1-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.593 5.593 0 0 1-.319-1.433.053.053 0 0 1 .066-.054c1.517.363 3.072.546 4.632.546.376 0 .75 0 1.125-.01 1.57-.044 3.224-.124 4.768-.422.038-.008.077-.015.11-.024 2.435-.464 4.753-1.92 4.989-5.604.008-.145.03-1.52.03-1.67.002-.512.167-3.63-.024-5.545zm-3.748 9.195h-2.561V8.29c0-1.309-.55-1.976-1.67-1.976-1.23 0-1.846.79-1.846 2.35v3.403h-2.546V8.663c0-1.56-.617-2.35-1.848-2.35-1.112 0-1.668.668-1.67 1.977v6.218H4.822V8.102c0-1.31.337-2.35 1.011-3.12.696-.77 1.608-1.164 2.74-1.164 1.311 0 2.302.5 2.962 1.498l.638 1.06.638-1.06c.66-.999 1.65-1.498 2.96-1.498 1.13 0 2.043.395 2.74 1.164.675.77 1.012 1.81 1.012 3.12z"/></svg></span><span><strong>Mastodon</strong><span>@[email protected]</span></span></a></li>
    <li><a class="fs-h fs-bluesky" href="https://bsky.app/profile/northline.dev"><span class="fs-tile"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M5.202 2.857C7.954 4.922 10.913 9.11 12 11.358c1.087-2.247 4.046-6.436 6.798-8.501C20.783 1.366 24 .213 24 3.883c0 .732-.42 6.156-.667 7.037-.856 3.061-3.978 3.842-6.755 3.37 4.854.826 6.089 3.562 3.422 6.299-5.065 5.196-7.28-1.304-7.847-2.97-.104-.305-.152-.448-.153-.327 0-.121-.05.022-.153.327-.568 1.666-2.782 8.166-7.847 2.97-2.667-2.737-1.432-5.473 3.422-6.3-2.777.473-5.899-.308-6.755-3.369C.42 10.04 0 4.615 0 3.883c0-3.67 3.217-2.517 5.202-1.026"/></svg></span><span><strong>Bluesky</strong><span>@northline.dev</span></span></a></li>
    <li><a class="fs-h fs-linkedin" href="https://www.linkedin.com/company/northline-labs"><span class="fs-tile"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill-rule="evenodd" d="M4.5 2h15A2.5 2.5 0 0 1 22 4.5v15a2.5 2.5 0 0 1-2.5 2.5h-15A2.5 2.5 0 0 1 2 19.5v-15A2.5 2.5 0 0 1 4.5 2zM7 5.15a1.65 1.65 0 1 0 0 3.3 1.65 1.65 0 1 0 0-3.3zM5.6 9.6v8.9h2.8V9.6zM10.4 9.6v8.9h2.8v-4.3c0-1.45.7-2.3 1.95-2.3 1.2 0 1.5.95 1.5 2.1v4.5h2.8v-5.05c0-2.45-.75-4.1-3.35-4.1-1.45 0-2.5.7-2.95 1.5V9.6z"/></svg></span><span><strong>LinkedIn</strong><span>Northline Labs</span></span></a></li>
    <li><a class="fs-h fs-discord" href="https://discord.gg/northline"><span class="fs-tile"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z"/></svg></span><span><strong>Discord</strong><span>Community server</span></span></a></li>
    <li><a class="fs-h fs-youtube" href="https://www.youtube.com/@northlinelabs"><span class="fs-tile"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg></span><span><strong>YouTube</strong><span>Release walkthroughs</span></span></a></li>
  </ul></div>
</footer></div>
<div><span class="lbl">One-line footer band</span>
<footer class="fs-c">
  <p>© 2026 Atlas Field Guides</p>
  <ul role="list">
    <li><a href="https://atlasfieldguides.example/feed.xml" aria-label="Atlas Field Guides RSS feed"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M19.199 24C19.199 13.467 10.533 4.8 0 4.8V0c13.165 0 24 10.835 24 24h-4.801zM3.291 17.415c1.814 0 3.293 1.479 3.293 3.295 0 1.813-1.485 3.29-3.301 3.29C1.47 24 0 22.526 0 20.71s1.475-3.294 3.291-3.295zM15.909 24h-4.665c0-6.169-5.075-11.245-11.244-11.245V8.09c8.727 0 15.909 7.184 15.909 15.91z"/></svg></a></li>
    <li><a href="mailto:[email protected]" aria-label="Email Atlas Field Guides"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill-rule="evenodd" d="M4.5 4h15A2.5 2.5 0 0 1 22 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-15A2.5 2.5 0 0 1 2 17.5v-11A2.5 2.5 0 0 1 4.5 4zM5.7 6 12 10.75 18.3 6zM4 7.25V17.5c0 .28.22.5.5.5h15a.5.5 0 0 0 .5-.5V7.25l-7.4 5.55a1 1 0 0 1-1.2 0z"/></svg></a></li>
    <li><a href="https://www.threads.com/@atlasfieldguides" aria-label="Atlas Field Guides on Threads"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M18.263 11.097c-.03-3.486-1.92-5.586-5.111-5.586-2.13 0-3.922.963-4.863 2.499l2.062 1.438c.535-.843 1.272-1.543 2.628-1.543 1.528 0 2.318.85 2.544 2.431a15 15 0 0 0-2.236-.173c-4.125 0-6.068 1.867-6.068 4.336s1.943 3.99 4.804 3.99c3.139 0 5.013-2.115 5.781-4.735.798.361 1.348 1.204 1.348 2.47 0 3.387-3.907 5.232-7.22 5.232-4.885 0-8.077-3.207-8.077-8.424 0-6.392 4.223-10.487 9.9-10.487 3.808 0 5.69 1.671 6.97 3.914l2.108-1.475C21.44 2.078 18.331 0 13.663 0 6.227 0 1.168 5.277 1.168 12.934c0 7 4.953 11.066 10.856 11.066 4.878 0 9.809-2.846 9.809-7.716 0-2.545-1.46-4.231-3.569-5.187m-6.33 4.855c-1.077 0-2.026-.512-2.026-1.453 0-1.483 1.822-1.934 3.606-1.934.678 0 1.34.045 1.927.173-.422 1.927-1.671 3.215-3.508 3.214Z"/></svg></a></li>
    <li><a href="https://bsky.app/profile/atlasfieldguides.example" aria-label="Atlas Field Guides on Bluesky"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M5.202 2.857C7.954 4.922 10.913 9.11 12 11.358c1.087-2.247 4.046-6.436 6.798-8.501C20.783 1.366 24 .213 24 3.883c0 .732-.42 6.156-.667 7.037-.856 3.061-3.978 3.842-6.755 3.37 4.854.826 6.089 3.562 3.422 6.299-5.065 5.196-7.28-1.304-7.847-2.97-.104-.305-.152-.448-.153-.327 0-.121-.05.022-.153.327-.568 1.666-2.782 8.166-7.847 2.97-2.667-2.737-1.432-5.473 3.422-6.3-2.777.473-5.899-.308-6.755-3.369C.42 10.04 0 4.615 0 3.883c0-3.67 3.217-2.517 5.202-1.026"/></svg></a></li>
    <li><a href="https://www.reddit.com/r/atlasfieldguides/" aria-label="Atlas Field Guides on Reddit"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 0C5.373 0 0 5.373 0 12c0 3.314 1.343 6.314 3.515 8.485l-2.286 2.286C.775 23.225 1.097 24 1.738 24H12c6.627 0 12-5.373 12-12S18.627 0 12 0Zm4.388 3.199c1.104 0 1.999.895 1.999 1.999 0 1.105-.895 2-1.999 2-.946 0-1.739-.657-1.947-1.539v.002c-1.147.162-2.032 1.15-2.032 2.341v.007c1.776.067 3.4.567 4.686 1.363.473-.363 1.064-.58 1.707-.58 1.547 0 2.802 1.254 2.802 2.802 0 1.117-.655 2.081-1.601 2.531-.088 3.256-3.637 5.876-7.997 5.876-4.361 0-7.905-2.617-7.998-5.87-.954-.447-1.614-1.415-1.614-2.538 0-1.548 1.255-2.802 2.803-2.802.645 0 1.239.218 1.712.585 1.275-.79 2.881-1.291 4.64-1.365v-.01c0-1.663 1.263-3.034 2.88-3.207.188-.911.993-1.595 1.959-1.595Zm-8.085 8.376c-.784 0-1.459.78-1.506 1.797-.047 1.016.64 1.429 1.426 1.429.786 0 1.371-.369 1.418-1.385.047-1.017-.553-1.841-1.338-1.841Zm7.406 0c-.786 0-1.385.824-1.338 1.841.047 1.017.634 1.385 1.418 1.385.785 0 1.473-.413 1.426-1.429-.046-1.017-.721-1.797-1.506-1.797Zm-3.703 4.013c-.974 0-1.907.048-2.77.135-.147.015-.241.168-.183.305.483 1.154 1.622 1.964 2.953 1.964 1.33 0 2.47-.81 2.953-1.964.057-.137-.037-.29-.184-.305-.863-.087-1.795-.135-2.769-.135Z"/></svg></a></li>
  </ul>
</footer></div>
CSS 
/* Footer social blocks. Icon-only links are named by aria-label ("Fernhill Coffee on Instagram");
   links that show a platform and handle are named by that text. Icons are aria-hidden. */
.fs-a{padding:44px 24px 32px;border-radius:20px;background:#fdf8f3;text-align:center;color:#3b2416}
.fs-a p{margin:6px 0 0;color:#6b4a35}
.fs-a .fs-brand{margin:0;font-family:Georgia,"Times New Roman",serif;font-size:1.6rem;font-weight:700;letter-spacing:-.01em;color:#3b2416}
.fs-icons{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:22px 0 26px;padding:0;list-style:none}
.fs-ic{display:grid;place-items:center;width:44px;height:44px;border:1.5px solid #c9b3a3;border-radius:50%;color:#3b2416;
  transition:background-color .2s,border-color .2s,color .2s}
.fs-ic svg{width:19px;height:19px;fill:currentColor}
.fs-ic:hover,.fs-ic:focus-visible{background:#3b2416;border-color:#3b2416;color:#fff}
.fs-ic:focus-visible{outline:3px solid #3b2416;outline-offset:3px}
.fs-a small{display:block;padding-top:20px;border-top:1px solid #eadccf;font-size:.8rem;color:#6b4a35}

.fs-b{display:grid;gap:28px;padding:32px;border:1px solid #e2e8f0;border-radius:20px;background:#fff;color:#0f172a}
@media (min-width:768px){.fs-b{grid-template-columns:1fr 1.6fr;gap:40px}}
.fs-b p.fs-brand{margin:0;font-size:1.2rem;font-weight:800;letter-spacing:-.02em;color:#0f172a}
.fs-b p{margin:8px 0 0;font-size:.92rem;color:#475569;max-width:30ch}
.fs-b h2{margin:0 0 12px;font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#475569}
.fs-handles{display:grid;gap:6px;margin:0;padding:0;list-style:none}
@media (min-width:560px){.fs-handles{grid-template-columns:1fr 1fr}}
.fs-h{display:flex;align-items:center;gap:12px;padding:8px;border-radius:12px;color:#0f172a;text-decoration:none;transition:background-color .2s}
.fs-h .fs-tile{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:#f1f5f9;color:var(--fs-ink)}
.fs-h svg{width:18px;height:18px;fill:currentColor}
.fs-h strong{display:block;font-size:.92rem;line-height:1.3}
.fs-h span span{display:block;font-size:.82rem;line-height:1.3;color:#475569;overflow-wrap:anywhere}
.fs-h:hover,.fs-h:focus-visible{background:#f1f5f9}
.fs-h:hover .fs-tile,.fs-h:focus-visible .fs-tile{background:var(--fs-brand);color:var(--fs-on)}
.fs-h:focus-visible{outline:3px solid #0f172a;outline-offset:2px}

.fs-c{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 20px;padding:12px 12px 12px 24px;border-radius:14px;
  background:#134e4a;color:#fff;font-size:.88rem}
.fs-c ul{display:flex;flex-wrap:wrap;gap:2px;margin:0;padding:0;list-style:none}
.fs-c a{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;color:#fff;transition:background-color .2s}
.fs-c svg{width:18px;height:18px;fill:currentColor}
.fs-c a:hover,.fs-c a:focus-visible{background:rgba(255,255,255,.14)}
.fs-c a:focus-visible{outline:2px solid #fff;outline-offset:-2px}
@media (prefers-reduced-motion:reduce){.fs-ic,.fs-h,.fs-c a{transition:none}}
.fs-bluesky{--fs-brand:#1185FE;--fs-on:#ffffff;--fs-ink:#1185FE}
.fs-discord{--fs-brand:#5865F2;--fs-on:#ffffff;--fs-ink:#5865F2}
.fs-github{--fs-brand:#181717;--fs-on:#ffffff;--fs-ink:#181717}
.fs-linkedin{--fs-brand:#0A66C2;--fs-on:#ffffff;--fs-ink:#0A66C2}
.fs-mastodon{--fs-brand:#6364FF;--fs-on:#ffffff;--fs-ink:#6364FF}
.fs-youtube{--fs-brand:#FF0000;--fs-on:#ffffff;--fs-ink:#FF0000}

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS

HTML 
<div><span class="lbl">Centred footer with an icon row</span>
<footer class="fs-a text-center">
  <p class="fs-brand mb-0">Fernhill</p>
  <p class="mt-1 mb-0">Small-batch coffee, roasted in Bristol every Tuesday.</p>
  <ul class="fs-icons list-unstyled d-flex flex-wrap justify-content-center">
    <li><a class="btn rounded-circle fs-ic" href="https://www.instagram.com/fernhillcoffee/" aria-label="Fernhill Coffee on Instagram"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M7.0301.084c-1.2768.0602-2.1487.264-2.911.5634-.7888.3075-1.4575.72-2.1228 1.3877-.6652.6677-1.075 1.3368-1.3802 2.127-.2954.7638-.4956 1.6365-.552 2.914-.0564 1.2775-.0689 1.6882-.0626 4.947.0062 3.2586.0206 3.6671.0825 4.9473.061 1.2765.264 2.1482.5635 2.9107.308.7889.72 1.4573 1.388 2.1228.6679.6655 1.3365 1.0743 2.1285 1.38.7632.295 1.6361.4961 2.9134.552 1.2773.056 1.6884.069 4.9462.0627 3.2578-.0062 3.668-.0207 4.9478-.0814 1.28-.0607 2.147-.2652 2.9098-.5633.7889-.3086 1.4578-.72 2.1228-1.3881.665-.6682 1.0745-1.3378 1.3795-2.1284.2957-.7632.4966-1.636.552-2.9124.056-1.2809.0692-1.6898.063-4.948-.0063-3.2583-.021-3.6668-.0817-4.9465-.0607-1.2797-.264-2.1487-.5633-2.9117-.3084-.7889-.72-1.4568-1.3876-2.1228C21.2982 1.33 20.628.9208 19.8378.6165 19.074.321 18.2017.1197 16.9244.0645 15.6471.0093 15.236-.005 11.977.0014 8.718.0076 8.31.0215 7.0301.0839m.1402 21.6932c-1.17-.0509-1.8053-.2453-2.2287-.408-.5606-.216-.96-.4771-1.3819-.895-.422-.4178-.6811-.8186-.9-1.378-.1644-.4234-.3624-1.058-.4171-2.228-.0595-1.2645-.072-1.6442-.079-4.848-.007-3.2037.0053-3.583.0607-4.848.05-1.169.2456-1.805.408-2.2282.216-.5613.4762-.96.895-1.3816.4188-.4217.8184-.6814 1.3783-.9003.423-.1651 1.0575-.3614 2.227-.4171 1.2655-.06 1.6447-.072 4.848-.079 3.2033-.007 3.5835.005 4.8495.0608 1.169.0508 1.8053.2445 2.228.408.5608.216.96.4754 1.3816.895.4217.4194.6816.8176.9005 1.3787.1653.4217.3617 1.056.4169 2.2263.0602 1.2655.0739 1.645.0796 4.848.0058 3.203-.0055 3.5834-.061 4.848-.051 1.17-.245 1.8055-.408 2.2294-.216.5604-.4763.96-.8954 1.3814-.419.4215-.8181.6811-1.3783.9-.4224.1649-1.0577.3617-2.2262.4174-1.2656.0595-1.6448.072-4.8493.079-3.2045.007-3.5825-.006-4.848-.0608M16.953 5.5864A1.44 1.44 0 1 0 18.39 4.144a1.44 1.44 0 0 0-1.437 1.4424M5.8385 12.012c.0067 3.4032 2.7706 6.1557 6.173 6.1493 3.4026-.0065 6.157-2.7701 6.1506-6.1733-.0065-3.4032-2.771-6.1565-6.174-6.1498-3.403.0067-6.156 2.771-6.1496 6.1738M8 12.0077a4 4 0 1 1 4.008 3.9921A3.9996 3.9996 0 0 1 8 12.0077"/></svg></a></li>
    <li><a class="btn rounded-circle fs-ic" href="https://www.tiktok.com/@fernhillcoffee" aria-label="Fernhill Coffee on TikTok"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z"/></svg></a></li>
    <li><a class="btn rounded-circle fs-ic" href="https://www.facebook.com/fernhillcoffee" aria-label="Fernhill Coffee on Facebook"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036 26.805 26.805 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647Z"/></svg></a></li>
    <li><a class="btn rounded-circle fs-ic" href="https://www.youtube.com/@fernhillcoffee" aria-label="Fernhill Coffee on YouTube"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg></a></li>
    <li><a class="btn rounded-circle fs-ic" href="https://www.pinterest.com/fernhillcoffee/" aria-label="Fernhill Coffee on Pinterest"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12.017 0C5.396 0 .029 5.367.029 11.987c0 5.079 3.158 9.417 7.618 11.162-.105-.949-.199-2.403.041-3.439.219-.937 1.406-5.957 1.406-5.957s-.359-.72-.359-1.781c0-1.663.967-2.911 2.168-2.911 1.024 0 1.518.769 1.518 1.688 0 1.029-.653 2.567-.992 3.992-.285 1.193.6 2.165 1.775 2.165 2.128 0 3.768-2.245 3.768-5.487 0-2.861-2.063-4.869-5.008-4.869-3.41 0-5.409 2.562-5.409 5.199 0 1.033.394 2.143.889 2.741.099.12.112.225.085.345-.09.375-.293 1.199-.334 1.363-.053.225-.172.271-.401.165-1.495-.69-2.433-2.878-2.433-4.646 0-3.776 2.748-7.252 7.92-7.252 4.158 0 7.392 2.967 7.392 6.923 0 4.135-2.607 7.462-6.233 7.462-1.214 0-2.354-.629-2.758-1.379l-.749 2.848c-.269 1.045-1.004 2.352-1.498 3.146 1.123.345 2.306.535 3.55.535 6.607 0 11.985-5.365 11.985-11.987C23.97 5.39 18.592.026 11.985.026L12.017 0z"/></svg></a></li>
  </ul>
  <small class="d-block border-top">© 2026 Fernhill Coffee Roasters Ltd.</small>
</footer></div>
<div><span class="lbl">Split footer with handles</span>
<footer class="fs-b d-grid bg-white border rounded-4">
  <div><p class="fs-brand mb-0">Northline Labs</p><p class="mt-2 mb-0">Open-source tools that make CI pipelines faster. Built in public since 2021.</p></div>
  <div><h2 class="mb-3" id="fs-elsewhere">Elsewhere</h2>
  <ul class="list-group fs-handles" aria-labelledby="fs-elsewhere">
    <li class="list-group-item p-0"><a class="list-group-item-action text-decoration-none fs-h fs-github" href="https://github.com/northline"><span class="fs-tile"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></span><span><strong>GitHub</strong><span>github.com/northline</span></span></a></li>
    <li class="list-group-item p-0"><a class="list-group-item-action text-decoration-none fs-h fs-mastodon" href="https://mas.to/@northline"><span class="fs-tile"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-4.835.242-5.288.309C3.882.692 1.496 2.518.917 5.127.64 6.412.61 7.837.661 9.143c.074 1.874.088 3.745.26 5.611.118 1.24.325 2.47.62 3.68.55 2.237 2.777 4.098 4.96 4.857 2.336.792 4.849.923 7.256.38.265-.061.527-.132.786-.213.585-.184 1.27-.39 1.774-.753a.057.057 0 0 0 .023-.043v-1.809a.052.052 0 0 0-.02-.041.053.053 0 0 0-.046-.01 20.282 20.282 0 0 1-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.593 5.593 0 0 1-.319-1.433.053.053 0 0 1 .066-.054c1.517.363 3.072.546 4.632.546.376 0 .75 0 1.125-.01 1.57-.044 3.224-.124 4.768-.422.038-.008.077-.015.11-.024 2.435-.464 4.753-1.92 4.989-5.604.008-.145.03-1.52.03-1.67.002-.512.167-3.63-.024-5.545zm-3.748 9.195h-2.561V8.29c0-1.309-.55-1.976-1.67-1.976-1.23 0-1.846.79-1.846 2.35v3.403h-2.546V8.663c0-1.56-.617-2.35-1.848-2.35-1.112 0-1.668.668-1.67 1.977v6.218H4.822V8.102c0-1.31.337-2.35 1.011-3.12.696-.77 1.608-1.164 2.74-1.164 1.311 0 2.302.5 2.962 1.498l.638 1.06.638-1.06c.66-.999 1.65-1.498 2.96-1.498 1.13 0 2.043.395 2.74 1.164.675.77 1.012 1.81 1.012 3.12z"/></svg></span><span><strong>Mastodon</strong><span>@[email protected]</span></span></a></li>
    <li class="list-group-item p-0"><a class="list-group-item-action text-decoration-none fs-h fs-bluesky" href="https://bsky.app/profile/northline.dev"><span class="fs-tile"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M5.202 2.857C7.954 4.922 10.913 9.11 12 11.358c1.087-2.247 4.046-6.436 6.798-8.501C20.783 1.366 24 .213 24 3.883c0 .732-.42 6.156-.667 7.037-.856 3.061-3.978 3.842-6.755 3.37 4.854.826 6.089 3.562 3.422 6.299-5.065 5.196-7.28-1.304-7.847-2.97-.104-.305-.152-.448-.153-.327 0-.121-.05.022-.153.327-.568 1.666-2.782 8.166-7.847 2.97-2.667-2.737-1.432-5.473 3.422-6.3-2.777.473-5.899-.308-6.755-3.369C.42 10.04 0 4.615 0 3.883c0-3.67 3.217-2.517 5.202-1.026"/></svg></span><span><strong>Bluesky</strong><span>@northline.dev</span></span></a></li>
    <li class="list-group-item p-0"><a class="list-group-item-action text-decoration-none fs-h fs-linkedin" href="https://www.linkedin.com/company/northline-labs"><span class="fs-tile"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill-rule="evenodd" d="M4.5 2h15A2.5 2.5 0 0 1 22 4.5v15a2.5 2.5 0 0 1-2.5 2.5h-15A2.5 2.5 0 0 1 2 19.5v-15A2.5 2.5 0 0 1 4.5 2zM7 5.15a1.65 1.65 0 1 0 0 3.3 1.65 1.65 0 1 0 0-3.3zM5.6 9.6v8.9h2.8V9.6zM10.4 9.6v8.9h2.8v-4.3c0-1.45.7-2.3 1.95-2.3 1.2 0 1.5.95 1.5 2.1v4.5h2.8v-5.05c0-2.45-.75-4.1-3.35-4.1-1.45 0-2.5.7-2.95 1.5V9.6z"/></svg></span><span><strong>LinkedIn</strong><span>Northline Labs</span></span></a></li>
    <li class="list-group-item p-0"><a class="list-group-item-action text-decoration-none fs-h fs-discord" href="https://discord.gg/northline"><span class="fs-tile"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z"/></svg></span><span><strong>Discord</strong><span>Community server</span></span></a></li>
    <li class="list-group-item p-0"><a class="list-group-item-action text-decoration-none fs-h fs-youtube" href="https://www.youtube.com/@northlinelabs"><span class="fs-tile"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg></span><span><strong>YouTube</strong><span>Release walkthroughs</span></span></a></li>
  </ul></div>
</footer></div>
<div><span class="lbl">One-line footer band</span>
<footer class="fs-c d-flex flex-wrap align-items-center justify-content-between text-white">
  <p class="mb-0">© 2026 Atlas Field Guides</p>
  <ul class="list-unstyled d-flex flex-wrap m-0">
    <li><a class="btn" href="https://atlasfieldguides.example/feed.xml" aria-label="Atlas Field Guides RSS feed"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M19.199 24C19.199 13.467 10.533 4.8 0 4.8V0c13.165 0 24 10.835 24 24h-4.801zM3.291 17.415c1.814 0 3.293 1.479 3.293 3.295 0 1.813-1.485 3.29-3.301 3.29C1.47 24 0 22.526 0 20.71s1.475-3.294 3.291-3.295zM15.909 24h-4.665c0-6.169-5.075-11.245-11.244-11.245V8.09c8.727 0 15.909 7.184 15.909 15.91z"/></svg></a></li>
    <li><a class="btn" href="mailto:[email protected]" aria-label="Email Atlas Field Guides"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill-rule="evenodd" d="M4.5 4h15A2.5 2.5 0 0 1 22 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-15A2.5 2.5 0 0 1 2 17.5v-11A2.5 2.5 0 0 1 4.5 4zM5.7 6 12 10.75 18.3 6zM4 7.25V17.5c0 .28.22.5.5.5h15a.5.5 0 0 0 .5-.5V7.25l-7.4 5.55a1 1 0 0 1-1.2 0z"/></svg></a></li>
    <li><a class="btn" href="https://www.threads.com/@atlasfieldguides" aria-label="Atlas Field Guides on Threads"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M18.263 11.097c-.03-3.486-1.92-5.586-5.111-5.586-2.13 0-3.922.963-4.863 2.499l2.062 1.438c.535-.843 1.272-1.543 2.628-1.543 1.528 0 2.318.85 2.544 2.431a15 15 0 0 0-2.236-.173c-4.125 0-6.068 1.867-6.068 4.336s1.943 3.99 4.804 3.99c3.139 0 5.013-2.115 5.781-4.735.798.361 1.348 1.204 1.348 2.47 0 3.387-3.907 5.232-7.22 5.232-4.885 0-8.077-3.207-8.077-8.424 0-6.392 4.223-10.487 9.9-10.487 3.808 0 5.69 1.671 6.97 3.914l2.108-1.475C21.44 2.078 18.331 0 13.663 0 6.227 0 1.168 5.277 1.168 12.934c0 7 4.953 11.066 10.856 11.066 4.878 0 9.809-2.846 9.809-7.716 0-2.545-1.46-4.231-3.569-5.187m-6.33 4.855c-1.077 0-2.026-.512-2.026-1.453 0-1.483 1.822-1.934 3.606-1.934.678 0 1.34.045 1.927.173-.422 1.927-1.671 3.215-3.508 3.214Z"/></svg></a></li>
    <li><a class="btn" href="https://bsky.app/profile/atlasfieldguides.example" aria-label="Atlas Field Guides on Bluesky"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M5.202 2.857C7.954 4.922 10.913 9.11 12 11.358c1.087-2.247 4.046-6.436 6.798-8.501C20.783 1.366 24 .213 24 3.883c0 .732-.42 6.156-.667 7.037-.856 3.061-3.978 3.842-6.755 3.37 4.854.826 6.089 3.562 3.422 6.299-5.065 5.196-7.28-1.304-7.847-2.97-.104-.305-.152-.448-.153-.327 0-.121-.05.022-.153.327-.568 1.666-2.782 8.166-7.847 2.97-2.667-2.737-1.432-5.473 3.422-6.3-2.777.473-5.899-.308-6.755-3.369C.42 10.04 0 4.615 0 3.883c0-3.67 3.217-2.517 5.202-1.026"/></svg></a></li>
    <li><a class="btn" href="https://www.reddit.com/r/atlasfieldguides/" aria-label="Atlas Field Guides on Reddit"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 0C5.373 0 0 5.373 0 12c0 3.314 1.343 6.314 3.515 8.485l-2.286 2.286C.775 23.225 1.097 24 1.738 24H12c6.627 0 12-5.373 12-12S18.627 0 12 0Zm4.388 3.199c1.104 0 1.999.895 1.999 1.999 0 1.105-.895 2-1.999 2-.946 0-1.739-.657-1.947-1.539v.002c-1.147.162-2.032 1.15-2.032 2.341v.007c1.776.067 3.4.567 4.686 1.363.473-.363 1.064-.58 1.707-.58 1.547 0 2.802 1.254 2.802 2.802 0 1.117-.655 2.081-1.601 2.531-.088 3.256-3.637 5.876-7.997 5.876-4.361 0-7.905-2.617-7.998-5.87-.954-.447-1.614-1.415-1.614-2.538 0-1.548 1.255-2.802 2.803-2.802.645 0 1.239.218 1.712.585 1.275-.79 2.881-1.291 4.64-1.365v-.01c0-1.663 1.263-3.034 2.88-3.207.188-.911.993-1.595 1.959-1.595Zm-8.085 8.376c-.784 0-1.459.78-1.506 1.797-.047 1.016.64 1.429 1.426 1.429.786 0 1.371-.369 1.418-1.385.047-1.017-.553-1.841-1.338-1.841Zm7.406 0c-.786 0-1.385.824-1.338 1.841.047 1.017.634 1.385 1.418 1.385.785 0 1.473-.413 1.426-1.429-.046-1.017-.721-1.797-1.506-1.797Zm-3.703 4.013c-.974 0-1.907.048-2.77.135-.147.015-.241.168-.183.305.483 1.154 1.622 1.964 2.953 1.964 1.33 0 2.47-.81 2.953-1.964.057-.137-.037-.29-.184-.305-.863-.087-1.795-.135-2.769-.135Z"/></svg></a></li>
  </ul>
</footer></div>
CSS 
/* Footer social blocks (Bootstrap): grid and spacing utilities for the layouts, .btn for the icon links
   and .list-group-item-action rows for the handles. Icon-only links are named by aria-label. */
.fs-a{padding:44px 24px 32px;border-radius:20px;background:#fdf8f3;color:#3b2416}
.fs-a p{color:#6b4a35}
.fs-a .fs-brand{font-family:Georgia,"Times New Roman",serif;font-size:1.6rem;font-weight:700;letter-spacing:-.01em;color:#3b2416}
.fs-icons{gap:10px;margin:22px 0 26px}
.fs-ic{--bs-btn-padding-x:0;--bs-btn-padding-y:0;--bs-btn-border-width:1.5px;--bs-btn-border-color:#c9b3a3;--bs-btn-color:#3b2416;
  --bs-btn-hover-bg:#3b2416;--bs-btn-hover-border-color:#3b2416;--bs-btn-hover-color:#fff;--bs-btn-active-bg:#3b2416;--bs-btn-active-color:#fff;
  display:grid;place-items:center;width:44px;height:44px;transition:background-color .2s,border-color .2s,color .2s}
.fs-ic svg{width:19px;height:19px;fill:currentColor}
.fs-ic:focus-visible{outline:3px solid #3b2416;outline-offset:3px;box-shadow:none}
.fs-a small{padding-top:20px;border-color:#eadccf!important;color:#6b4a35;font-size:.8rem}
.fs-b{gap:28px;padding:32px;border-radius:20px!important;color:#0f172a}
@media (min-width:768px){.fs-b{grid-template-columns:1fr 1.6fr;gap:40px}}
.fs-b p.fs-brand{margin:0;font-size:1.2rem;font-weight:800;letter-spacing:-.02em;color:#0f172a}
.fs-b p{font-size:.92rem;color:#475569;max-width:30ch}
.fs-b h2{font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#475569}
.fs-handles{--bs-list-group-border-width:0;--bs-list-group-bg:transparent;--bs-list-group-action-hover-bg:#f1f5f9;--bs-list-group-action-active-bg:#f1f5f9;
  --bs-list-group-action-color:#0f172a;--bs-list-group-action-hover-color:#0f172a;display:grid;gap:6px}
@media (min-width:560px){.fs-handles{grid-template-columns:1fr 1fr}}
.fs-h{display:flex;align-items:center;gap:12px;padding:8px;border-radius:12px!important;transition:background-color .2s}
.fs-h .fs-tile{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:#f1f5f9;color:var(--fs-ink)}
.fs-h svg{width:18px;height:18px;fill:currentColor}
.fs-h strong{display:block;font-size:.92rem;line-height:1.3}
.fs-h span span{display:block;font-size:.82rem;line-height:1.3;color:#475569;overflow-wrap:anywhere}
.fs-h:hover .fs-tile,.fs-h:focus-visible .fs-tile{background:var(--fs-brand);color:var(--fs-on)}
.fs-h:focus-visible{outline:3px solid #0f172a;outline-offset:2px;z-index:2}
.fs-c{gap:10px 20px;padding:12px 12px 12px 24px;border-radius:14px;background:#134e4a;font-size:.88rem}
.fs-c ul{gap:2px}
.fs-c .btn{--bs-btn-padding-x:0;--bs-btn-padding-y:0;--bs-btn-border-radius:10px;--bs-btn-color:#fff;--bs-btn-border-color:transparent;
  --bs-btn-hover-bg:rgba(255,255,255,.14);--bs-btn-hover-color:#fff;--bs-btn-active-bg:rgba(255,255,255,.14);--bs-btn-active-color:#fff;
  display:grid;place-items:center;width:40px;height:40px;transition:background-color .2s}
.fs-c svg{width:18px;height:18px;fill:currentColor}
.fs-c .btn:focus-visible{outline:2px solid #fff;outline-offset:-2px;box-shadow:none}
@media (prefers-reduced-motion:reduce){.fs-ic,.fs-h,.fs-c .btn{transition:none}}
.fs-bluesky{--fs-brand:#1185FE;--fs-on:#ffffff;--fs-ink:#1185FE}
.fs-discord{--fs-brand:#5865F2;--fs-on:#ffffff;--fs-ink:#5865F2}
.fs-github{--fs-brand:#181717;--fs-on:#ffffff;--fs-ink:#181717}
.fs-linkedin{--fs-brand:#0A66C2;--fs-on:#ffffff;--fs-ink:#0A66C2}
.fs-mastodon{--fs-brand:#6364FF;--fs-on:#ffffff;--fs-ink:#6364FF}
.fs-youtube{--fs-brand:#FF0000;--fs-on:#ffffff;--fs-ink:#FF0000}

Tailwind 4 code

Requires: Tailwind CSS 4

HTML 
<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#475569] uppercase">Centred footer with an icon row</span>
<footer class="rounded-[20px] bg-[#fdf8f3] px-6 pt-11 pb-8 text-center text-[#3b2416]">
  <p class="font-[Georgia,'Times_New_Roman',serif] text-[1.6rem] font-bold tracking-[-.01em]">Fernhill</p>
  <p class="mt-1.5 text-[#6b4a35]">Small-batch coffee, roasted in Bristol every Tuesday.</p>
  <ul class="mt-[22px] mb-[26px] flex flex-wrap justify-center gap-2.5" role="list">
    <li><a class="grid size-11 place-items-center rounded-full border-[1.5px] border-[#c9b3a3] text-[#3b2416] transition-colors duration-200 hover:border-[#3b2416] hover:bg-[#3b2416] hover:text-white focus-visible:border-[#3b2416] focus-visible:bg-[#3b2416] focus-visible:text-white focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-[#3b2416] motion-reduce:transition-none" href="https://www.instagram.com/fernhillcoffee/" aria-label="Fernhill Coffee on Instagram"><svg class="size-[19px] fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M7.0301.084c-1.2768.0602-2.1487.264-2.911.5634-.7888.3075-1.4575.72-2.1228 1.3877-.6652.6677-1.075 1.3368-1.3802 2.127-.2954.7638-.4956 1.6365-.552 2.914-.0564 1.2775-.0689 1.6882-.0626 4.947.0062 3.2586.0206 3.6671.0825 4.9473.061 1.2765.264 2.1482.5635 2.9107.308.7889.72 1.4573 1.388 2.1228.6679.6655 1.3365 1.0743 2.1285 1.38.7632.295 1.6361.4961 2.9134.552 1.2773.056 1.6884.069 4.9462.0627 3.2578-.0062 3.668-.0207 4.9478-.0814 1.28-.0607 2.147-.2652 2.9098-.5633.7889-.3086 1.4578-.72 2.1228-1.3881.665-.6682 1.0745-1.3378 1.3795-2.1284.2957-.7632.4966-1.636.552-2.9124.056-1.2809.0692-1.6898.063-4.948-.0063-3.2583-.021-3.6668-.0817-4.9465-.0607-1.2797-.264-2.1487-.5633-2.9117-.3084-.7889-.72-1.4568-1.3876-2.1228C21.2982 1.33 20.628.9208 19.8378.6165 19.074.321 18.2017.1197 16.9244.0645 15.6471.0093 15.236-.005 11.977.0014 8.718.0076 8.31.0215 7.0301.0839m.1402 21.6932c-1.17-.0509-1.8053-.2453-2.2287-.408-.5606-.216-.96-.4771-1.3819-.895-.422-.4178-.6811-.8186-.9-1.378-.1644-.4234-.3624-1.058-.4171-2.228-.0595-1.2645-.072-1.6442-.079-4.848-.007-3.2037.0053-3.583.0607-4.848.05-1.169.2456-1.805.408-2.2282.216-.5613.4762-.96.895-1.3816.4188-.4217.8184-.6814 1.3783-.9003.423-.1651 1.0575-.3614 2.227-.4171 1.2655-.06 1.6447-.072 4.848-.079 3.2033-.007 3.5835.005 4.8495.0608 1.169.0508 1.8053.2445 2.228.408.5608.216.96.4754 1.3816.895.4217.4194.6816.8176.9005 1.3787.1653.4217.3617 1.056.4169 2.2263.0602 1.2655.0739 1.645.0796 4.848.0058 3.203-.0055 3.5834-.061 4.848-.051 1.17-.245 1.8055-.408 2.2294-.216.5604-.4763.96-.8954 1.3814-.419.4215-.8181.6811-1.3783.9-.4224.1649-1.0577.3617-2.2262.4174-1.2656.0595-1.6448.072-4.8493.079-3.2045.007-3.5825-.006-4.848-.0608M16.953 5.5864A1.44 1.44 0 1 0 18.39 4.144a1.44 1.44 0 0 0-1.437 1.4424M5.8385 12.012c.0067 3.4032 2.7706 6.1557 6.173 6.1493 3.4026-.0065 6.157-2.7701 6.1506-6.1733-.0065-3.4032-2.771-6.1565-6.174-6.1498-3.403.0067-6.156 2.771-6.1496 6.1738M8 12.0077a4 4 0 1 1 4.008 3.9921A3.9996 3.9996 0 0 1 8 12.0077"/></svg></a></li>
    <li><a class="grid size-11 place-items-center rounded-full border-[1.5px] border-[#c9b3a3] text-[#3b2416] transition-colors duration-200 hover:border-[#3b2416] hover:bg-[#3b2416] hover:text-white focus-visible:border-[#3b2416] focus-visible:bg-[#3b2416] focus-visible:text-white focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-[#3b2416] motion-reduce:transition-none" href="https://www.tiktok.com/@fernhillcoffee" aria-label="Fernhill Coffee on TikTok"><svg class="size-[19px] fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z"/></svg></a></li>
    <li><a class="grid size-11 place-items-center rounded-full border-[1.5px] border-[#c9b3a3] text-[#3b2416] transition-colors duration-200 hover:border-[#3b2416] hover:bg-[#3b2416] hover:text-white focus-visible:border-[#3b2416] focus-visible:bg-[#3b2416] focus-visible:text-white focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-[#3b2416] motion-reduce:transition-none" href="https://www.facebook.com/fernhillcoffee" aria-label="Fernhill Coffee on Facebook"><svg class="size-[19px] fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036 26.805 26.805 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647Z"/></svg></a></li>
    <li><a class="grid size-11 place-items-center rounded-full border-[1.5px] border-[#c9b3a3] text-[#3b2416] transition-colors duration-200 hover:border-[#3b2416] hover:bg-[#3b2416] hover:text-white focus-visible:border-[#3b2416] focus-visible:bg-[#3b2416] focus-visible:text-white focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-[#3b2416] motion-reduce:transition-none" href="https://www.youtube.com/@fernhillcoffee" aria-label="Fernhill Coffee on YouTube"><svg class="size-[19px] fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg></a></li>
    <li><a class="grid size-11 place-items-center rounded-full border-[1.5px] border-[#c9b3a3] text-[#3b2416] transition-colors duration-200 hover:border-[#3b2416] hover:bg-[#3b2416] hover:text-white focus-visible:border-[#3b2416] focus-visible:bg-[#3b2416] focus-visible:text-white focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-[#3b2416] motion-reduce:transition-none" href="https://www.pinterest.com/fernhillcoffee/" aria-label="Fernhill Coffee on Pinterest"><svg class="size-[19px] fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12.017 0C5.396 0 .029 5.367.029 11.987c0 5.079 3.158 9.417 7.618 11.162-.105-.949-.199-2.403.041-3.439.219-.937 1.406-5.957 1.406-5.957s-.359-.72-.359-1.781c0-1.663.967-2.911 2.168-2.911 1.024 0 1.518.769 1.518 1.688 0 1.029-.653 2.567-.992 3.992-.285 1.193.6 2.165 1.775 2.165 2.128 0 3.768-2.245 3.768-5.487 0-2.861-2.063-4.869-5.008-4.869-3.41 0-5.409 2.562-5.409 5.199 0 1.033.394 2.143.889 2.741.099.12.112.225.085.345-.09.375-.293 1.199-.334 1.363-.053.225-.172.271-.401.165-1.495-.69-2.433-2.878-2.433-4.646 0-3.776 2.748-7.252 7.92-7.252 4.158 0 7.392 2.967 7.392 6.923 0 4.135-2.607 7.462-6.233 7.462-1.214 0-2.354-.629-2.758-1.379l-.749 2.848c-.269 1.045-1.004 2.352-1.498 3.146 1.123.345 2.306.535 3.55.535 6.607 0 11.985-5.365 11.985-11.987C23.97 5.39 18.592.026 11.985.026L12.017 0z"/></svg></a></li>
  </ul>
  <small class="block border-t border-[#eadccf] pt-5 text-[.8rem] text-[#6b4a35]">© 2026 Fernhill Coffee Roasters Ltd.</small>
</footer></div>
<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#475569] uppercase">Split footer with handles</span>
<footer class="grid gap-7 rounded-[20px] border border-[#e2e8f0] bg-white p-8 text-[#0f172a] md:grid-cols-[1fr_1.6fr] md:gap-10">
  <div><p class="text-[1.2rem] font-extrabold tracking-[-.02em]">Northline Labs</p><p class="mt-2 max-w-[30ch] text-[.92rem] text-[#475569]">Open-source tools that make CI pipelines faster. Built in public since 2021.</p></div>
  <div><h2 class="mb-3 text-[.78rem] font-bold tracking-[.12em] text-[#475569] uppercase" id="fs-elsewhere">Elsewhere</h2>
  <ul class="grid gap-1.5 sm:grid-cols-2" role="list" aria-labelledby="fs-elsewhere">
    <li><a class="group flex items-center gap-3 rounded-xl p-2 text-[#0f172a] transition-colors duration-200 hover:bg-[#f1f5f9] focus-visible:bg-[#f1f5f9] focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-[#0f172a] motion-reduce:transition-none [--b:#181717] [--on:#ffffff] [--ink:#181717]" href="https://github.com/northline"><span class="grid size-[38px] flex-none place-items-center rounded-[10px] bg-[#f1f5f9] text-(--ink) group-hover:bg-(--b) group-hover:text-(--on) group-focus-visible:bg-(--b) group-focus-visible:text-(--on)"><svg class="size-[18px] fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></span><span><strong class="block text-[.92rem] leading-[1.3]">GitHub</strong><span class="block text-[.82rem] leading-[1.3] wrap-anywhere text-[#475569]">github.com/northline</span></span></a></li>
    <li><a class="group flex items-center gap-3 rounded-xl p-2 text-[#0f172a] transition-colors duration-200 hover:bg-[#f1f5f9] focus-visible:bg-[#f1f5f9] focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-[#0f172a] motion-reduce:transition-none [--b:#6364FF] [--on:#ffffff] [--ink:#6364FF]" href="https://mas.to/@northline"><span class="grid size-[38px] flex-none place-items-center rounded-[10px] bg-[#f1f5f9] text-(--ink) group-hover:bg-(--b) group-hover:text-(--on) group-focus-visible:bg-(--b) group-focus-visible:text-(--on)"><svg class="size-[18px] fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-4.835.242-5.288.309C3.882.692 1.496 2.518.917 5.127.64 6.412.61 7.837.661 9.143c.074 1.874.088 3.745.26 5.611.118 1.24.325 2.47.62 3.68.55 2.237 2.777 4.098 4.96 4.857 2.336.792 4.849.923 7.256.38.265-.061.527-.132.786-.213.585-.184 1.27-.39 1.774-.753a.057.057 0 0 0 .023-.043v-1.809a.052.052 0 0 0-.02-.041.053.053 0 0 0-.046-.01 20.282 20.282 0 0 1-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.593 5.593 0 0 1-.319-1.433.053.053 0 0 1 .066-.054c1.517.363 3.072.546 4.632.546.376 0 .75 0 1.125-.01 1.57-.044 3.224-.124 4.768-.422.038-.008.077-.015.11-.024 2.435-.464 4.753-1.92 4.989-5.604.008-.145.03-1.52.03-1.67.002-.512.167-3.63-.024-5.545zm-3.748 9.195h-2.561V8.29c0-1.309-.55-1.976-1.67-1.976-1.23 0-1.846.79-1.846 2.35v3.403h-2.546V8.663c0-1.56-.617-2.35-1.848-2.35-1.112 0-1.668.668-1.67 1.977v6.218H4.822V8.102c0-1.31.337-2.35 1.011-3.12.696-.77 1.608-1.164 2.74-1.164 1.311 0 2.302.5 2.962 1.498l.638 1.06.638-1.06c.66-.999 1.65-1.498 2.96-1.498 1.13 0 2.043.395 2.74 1.164.675.77 1.012 1.81 1.012 3.12z"/></svg></span><span><strong class="block text-[.92rem] leading-[1.3]">Mastodon</strong><span class="block text-[.82rem] leading-[1.3] wrap-anywhere text-[#475569]">@[email protected]</span></span></a></li>
    <li><a class="group flex items-center gap-3 rounded-xl p-2 text-[#0f172a] transition-colors duration-200 hover:bg-[#f1f5f9] focus-visible:bg-[#f1f5f9] focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-[#0f172a] motion-reduce:transition-none [--b:#1185FE] [--on:#ffffff] [--ink:#1185FE]" href="https://bsky.app/profile/northline.dev"><span class="grid size-[38px] flex-none place-items-center rounded-[10px] bg-[#f1f5f9] text-(--ink) group-hover:bg-(--b) group-hover:text-(--on) group-focus-visible:bg-(--b) group-focus-visible:text-(--on)"><svg class="size-[18px] fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M5.202 2.857C7.954 4.922 10.913 9.11 12 11.358c1.087-2.247 4.046-6.436 6.798-8.501C20.783 1.366 24 .213 24 3.883c0 .732-.42 6.156-.667 7.037-.856 3.061-3.978 3.842-6.755 3.37 4.854.826 6.089 3.562 3.422 6.299-5.065 5.196-7.28-1.304-7.847-2.97-.104-.305-.152-.448-.153-.327 0-.121-.05.022-.153.327-.568 1.666-2.782 8.166-7.847 2.97-2.667-2.737-1.432-5.473 3.422-6.3-2.777.473-5.899-.308-6.755-3.369C.42 10.04 0 4.615 0 3.883c0-3.67 3.217-2.517 5.202-1.026"/></svg></span><span><strong class="block text-[.92rem] leading-[1.3]">Bluesky</strong><span class="block text-[.82rem] leading-[1.3] wrap-anywhere text-[#475569]">@northline.dev</span></span></a></li>
    <li><a class="group flex items-center gap-3 rounded-xl p-2 text-[#0f172a] transition-colors duration-200 hover:bg-[#f1f5f9] focus-visible:bg-[#f1f5f9] focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-[#0f172a] motion-reduce:transition-none [--b:#0A66C2] [--on:#ffffff] [--ink:#0A66C2]" href="https://www.linkedin.com/company/northline-labs"><span class="grid size-[38px] flex-none place-items-center rounded-[10px] bg-[#f1f5f9] text-(--ink) group-hover:bg-(--b) group-hover:text-(--on) group-focus-visible:bg-(--b) group-focus-visible:text-(--on)"><svg class="size-[18px] fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill-rule="evenodd" d="M4.5 2h15A2.5 2.5 0 0 1 22 4.5v15a2.5 2.5 0 0 1-2.5 2.5h-15A2.5 2.5 0 0 1 2 19.5v-15A2.5 2.5 0 0 1 4.5 2zM7 5.15a1.65 1.65 0 1 0 0 3.3 1.65 1.65 0 1 0 0-3.3zM5.6 9.6v8.9h2.8V9.6zM10.4 9.6v8.9h2.8v-4.3c0-1.45.7-2.3 1.95-2.3 1.2 0 1.5.95 1.5 2.1v4.5h2.8v-5.05c0-2.45-.75-4.1-3.35-4.1-1.45 0-2.5.7-2.95 1.5V9.6z"/></svg></span><span><strong class="block text-[.92rem] leading-[1.3]">LinkedIn</strong><span class="block text-[.82rem] leading-[1.3] wrap-anywhere text-[#475569]">Northline Labs</span></span></a></li>
    <li><a class="group flex items-center gap-3 rounded-xl p-2 text-[#0f172a] transition-colors duration-200 hover:bg-[#f1f5f9] focus-visible:bg-[#f1f5f9] focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-[#0f172a] motion-reduce:transition-none [--b:#5865F2] [--on:#ffffff] [--ink:#5865F2]" href="https://discord.gg/northline"><span class="grid size-[38px] flex-none place-items-center rounded-[10px] bg-[#f1f5f9] text-(--ink) group-hover:bg-(--b) group-hover:text-(--on) group-focus-visible:bg-(--b) group-focus-visible:text-(--on)"><svg class="size-[18px] fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z"/></svg></span><span><strong class="block text-[.92rem] leading-[1.3]">Discord</strong><span class="block text-[.82rem] leading-[1.3] wrap-anywhere text-[#475569]">Community server</span></span></a></li>
    <li><a class="group flex items-center gap-3 rounded-xl p-2 text-[#0f172a] transition-colors duration-200 hover:bg-[#f1f5f9] focus-visible:bg-[#f1f5f9] focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-[#0f172a] motion-reduce:transition-none [--b:#FF0000] [--on:#ffffff] [--ink:#FF0000]" href="https://www.youtube.com/@northlinelabs"><span class="grid size-[38px] flex-none place-items-center rounded-[10px] bg-[#f1f5f9] text-(--ink) group-hover:bg-(--b) group-hover:text-(--on) group-focus-visible:bg-(--b) group-focus-visible:text-(--on)"><svg class="size-[18px] fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg></span><span><strong class="block text-[.92rem] leading-[1.3]">YouTube</strong><span class="block text-[.82rem] leading-[1.3] wrap-anywhere text-[#475569]">Release walkthroughs</span></span></a></li>
  </ul></div>
</footer></div>
<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#475569] uppercase">One-line footer band</span>
<footer class="flex flex-wrap items-center justify-between gap-x-5 gap-y-2.5 rounded-[14px] bg-[#134e4a] py-3 pr-3 pl-6 text-[.88rem] text-white">
  <p>© 2026 Atlas Field Guides</p>
  <ul class="flex flex-wrap gap-0.5" role="list">
    <li><a class="grid size-10 place-items-center rounded-[10px] text-white transition-colors duration-200 hover:bg-white/14 focus-visible:bg-white/14 focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-white motion-reduce:transition-none" href="https://atlasfieldguides.example/feed.xml" aria-label="Atlas Field Guides RSS feed"><svg class="size-[18px] fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M19.199 24C19.199 13.467 10.533 4.8 0 4.8V0c13.165 0 24 10.835 24 24h-4.801zM3.291 17.415c1.814 0 3.293 1.479 3.293 3.295 0 1.813-1.485 3.29-3.301 3.29C1.47 24 0 22.526 0 20.71s1.475-3.294 3.291-3.295zM15.909 24h-4.665c0-6.169-5.075-11.245-11.244-11.245V8.09c8.727 0 15.909 7.184 15.909 15.91z"/></svg></a></li>
    <li><a class="grid size-10 place-items-center rounded-[10px] text-white transition-colors duration-200 hover:bg-white/14 focus-visible:bg-white/14 focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-white motion-reduce:transition-none" href="mailto:[email protected]" aria-label="Email Atlas Field Guides"><svg class="size-[18px] fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill-rule="evenodd" d="M4.5 4h15A2.5 2.5 0 0 1 22 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-15A2.5 2.5 0 0 1 2 17.5v-11A2.5 2.5 0 0 1 4.5 4zM5.7 6 12 10.75 18.3 6zM4 7.25V17.5c0 .28.22.5.5.5h15a.5.5 0 0 0 .5-.5V7.25l-7.4 5.55a1 1 0 0 1-1.2 0z"/></svg></a></li>
    <li><a class="grid size-10 place-items-center rounded-[10px] text-white transition-colors duration-200 hover:bg-white/14 focus-visible:bg-white/14 focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-white motion-reduce:transition-none" href="https://www.threads.com/@atlasfieldguides" aria-label="Atlas Field Guides on Threads"><svg class="size-[18px] fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M18.263 11.097c-.03-3.486-1.92-5.586-5.111-5.586-2.13 0-3.922.963-4.863 2.499l2.062 1.438c.535-.843 1.272-1.543 2.628-1.543 1.528 0 2.318.85 2.544 2.431a15 15 0 0 0-2.236-.173c-4.125 0-6.068 1.867-6.068 4.336s1.943 3.99 4.804 3.99c3.139 0 5.013-2.115 5.781-4.735.798.361 1.348 1.204 1.348 2.47 0 3.387-3.907 5.232-7.22 5.232-4.885 0-8.077-3.207-8.077-8.424 0-6.392 4.223-10.487 9.9-10.487 3.808 0 5.69 1.671 6.97 3.914l2.108-1.475C21.44 2.078 18.331 0 13.663 0 6.227 0 1.168 5.277 1.168 12.934c0 7 4.953 11.066 10.856 11.066 4.878 0 9.809-2.846 9.809-7.716 0-2.545-1.46-4.231-3.569-5.187m-6.33 4.855c-1.077 0-2.026-.512-2.026-1.453 0-1.483 1.822-1.934 3.606-1.934.678 0 1.34.045 1.927.173-.422 1.927-1.671 3.215-3.508 3.214Z"/></svg></a></li>
    <li><a class="grid size-10 place-items-center rounded-[10px] text-white transition-colors duration-200 hover:bg-white/14 focus-visible:bg-white/14 focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-white motion-reduce:transition-none" href="https://bsky.app/profile/atlasfieldguides.example" aria-label="Atlas Field Guides on Bluesky"><svg class="size-[18px] fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M5.202 2.857C7.954 4.922 10.913 9.11 12 11.358c1.087-2.247 4.046-6.436 6.798-8.501C20.783 1.366 24 .213 24 3.883c0 .732-.42 6.156-.667 7.037-.856 3.061-3.978 3.842-6.755 3.37 4.854.826 6.089 3.562 3.422 6.299-5.065 5.196-7.28-1.304-7.847-2.97-.104-.305-.152-.448-.153-.327 0-.121-.05.022-.153.327-.568 1.666-2.782 8.166-7.847 2.97-2.667-2.737-1.432-5.473 3.422-6.3-2.777.473-5.899-.308-6.755-3.369C.42 10.04 0 4.615 0 3.883c0-3.67 3.217-2.517 5.202-1.026"/></svg></a></li>
    <li><a class="grid size-10 place-items-center rounded-[10px] text-white transition-colors duration-200 hover:bg-white/14 focus-visible:bg-white/14 focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-white motion-reduce:transition-none" href="https://www.reddit.com/r/atlasfieldguides/" aria-label="Atlas Field Guides on Reddit"><svg class="size-[18px] fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 0C5.373 0 0 5.373 0 12c0 3.314 1.343 6.314 3.515 8.485l-2.286 2.286C.775 23.225 1.097 24 1.738 24H12c6.627 0 12-5.373 12-12S18.627 0 12 0Zm4.388 3.199c1.104 0 1.999.895 1.999 1.999 0 1.105-.895 2-1.999 2-.946 0-1.739-.657-1.947-1.539v.002c-1.147.162-2.032 1.15-2.032 2.341v.007c1.776.067 3.4.567 4.686 1.363.473-.363 1.064-.58 1.707-.58 1.547 0 2.802 1.254 2.802 2.802 0 1.117-.655 2.081-1.601 2.531-.088 3.256-3.637 5.876-7.997 5.876-4.361 0-7.905-2.617-7.998-5.87-.954-.447-1.614-1.415-1.614-2.538 0-1.548 1.255-2.802 2.803-2.802.645 0 1.239.218 1.712.585 1.275-.79 2.881-1.291 4.64-1.365v-.01c0-1.663 1.263-3.034 2.88-3.207.188-.911.993-1.595 1.959-1.595Zm-8.085 8.376c-.784 0-1.459.78-1.506 1.797-.047 1.016.64 1.429 1.426 1.429.786 0 1.371-.369 1.418-1.385.047-1.017-.553-1.841-1.338-1.841Zm7.406 0c-.786 0-1.385.824-1.338 1.841.047 1.017.634 1.385 1.418 1.385.785 0 1.473-.413 1.426-1.429-.046-1.017-.721-1.797-1.506-1.797Zm-3.703 4.013c-.974 0-1.907.048-2.77.135-.147.015-.241.168-.183.305.483 1.154 1.622 1.964 2.953 1.964 1.33 0 2.47-.81 2.953-1.964.057-.137-.037-.29-.184-.305-.863-.087-1.795-.135-2.769-.135Z"/></svg></a></li>
  </ul>
</footer></div>

About this set

Three footers built around social links, each for a different kind of site. The centred footer is for a small business, Fernhill Coffee Roasters: a serif wordmark, one line about the roastery, a row of outlined circle icons for Instagram, TikTok, Facebook, YouTube and Pinterest that fill with dark roast brown on hover, and a copyright line. The split footer is for an open-source team, Northline Labs, with a short description on the left and an Elsewhere list on the right that shows each network with its handle, so visitors know what they will find, such as @[email protected] on Mastodon or the community Discord server. Use it where people search for you by handle. The one-line band is a single teal strip with the copyright on one side and small white icons for RSS, email, Threads, Bluesky and Reddit, for content sites that want the footer out of the way. Icon-only links are named with aria-label, such as Fernhill Coffee on Instagram, and handle rows are named by their visible text. The Bootstrap version uses spacing utilities, .btn and .list-group-item-action rows, and the Tailwind version uses grid and colour utilities. No JavaScript.

What’s included

  • Centred, split and one-line footer layouts
  • Handle list that shows each profile name, not only a logo
  • Footer-specific palettes: warm brown, white and teal
  • All icon links are 40 to 44 pixels
  • Bootstrap version uses .list-group-item-action for the handle rows

Accessibility

Icon-only links have an aria-label naming the business and the network, and handle rows are named by the platform and handle they show. The Elsewhere list is labelled by its heading, icons are aria-hidden, focus shows a solid outline in each footer's ink colour, and colour transitions stop under prefers-reduced-motion.

Customise it

Change the #fdf8f3, #3b2416 and #134e4a colours in .fs-a and .fs-c for the centred and band footers, and the handle tile colours through the .fs-network classes. In Tailwind edit the matching colour utilities in the markup.