Home / Snippets / Footers / Local business footer Try the design Preview widthFit panel Mobile · 390 px Tablet · 768 px Desktop · 1280 px Open demo ↗
Preview links stay in the example. Copy the source to use your own destinations. Form previews never send information.
Copy the source HTML CSS JavaScript Astro
Copy HTML <footer class="fct-local-business-footer s-footer s-business" data-snippet="local-business-footer"><div class="s-wrap"><div class="s-columns"><div><h2>Northfield<br>Services.</h2><p>12 Example Street<br>Example Town · AB1 2CD</p><a href="tel:+441632960000">+44 (0)1632 960000</a><a href="mailto:office@example.com">office@example.com</a></div><div><h3>Opening hours</h3><dl><dt>Monday–Friday</dt><dd>09:00–17:00</dd><dt>Saturday & Sunday</dt><dd>Closed</dd></dl><p class="s-muted">Example hours. Replace before launch.</p></div><div><h3>Explore</h3><a href="about.html">About</a><a href="work.html">Our work</a><a href="contact.html">Contact</a></div><div><h3>Useful details</h3><a href="services.html">Services</a><a href="faq.html">Questions</a><a href="visit.html">Visit us</a></div></div><div class="s-bottom"><span>© 2026 North & Field · Example business</span><div class="s-links"><a href="privacy.html">Privacy</a><a href="terms.html">Terms</a></div></div></div></footer>
Copy CSS .fct-local-business-footer{--s-bg:#162e42;--s-ink:#ffffff;--s-accent:#e0bd80;font:16px/1.65 system-ui,sans-serif;color:var(--s-ink);background:var(--s-bg)}.fct-local-business-footer,.fct-local-business-footer *{box-sizing:border-box}.fct-local-business-footer :is(h2,h3,p,ul,figure){margin:0}.fct-local-business-footer h2,.fct-local-business-footer h3{line-height:1.2;letter-spacing:-.035em}.fct-local-business-footer h2{font-size:clamp(1.8rem,4vw,3.5rem)}.fct-local-business-footer a{color:inherit;text-underline-offset:5px;overflow-wrap:anywhere}.fct-local-business-footer :is(a,button,input,textarea,select,summary):focus-visible{outline:3px solid var(--s-accent);outline-offset:4px}.fct-local-business-footer button,.fct-local-business-footer input,.fct-local-business-footer textarea,.fct-local-business-footer select{font:inherit}.fct-local-business-footer a,.fct-local-business-footer button{touch-action:manipulation}.fct-local-business-footer .s-wrap{max-width:1200px;margin-inline:auto;padding:40px 28px}.fct-local-business-footer .s-kicker{font-size:.8125rem;letter-spacing:.13em;text-transform:uppercase;margin-bottom:18px}.fct-local-business-footer .s-button{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:11px 21px;border:1px solid currentColor;text-decoration:none;background:transparent;color:inherit;cursor:pointer;border-radius:2px;font-weight:600}.fct-local-business-footer .s-muted{opacity:.82}.fct-local-business-footer .s-links{display:flex;gap:8px 26px;flex-wrap:wrap}.fct-local-business-footer .s-links a{display:inline-flex;align-items:center;min-height:44px}.fct-local-business-footer .s-rule{border-top:1px solid currentColor;padding-top:20px;margin-top:30px}.fct-local-business-footer .s-grid{display:grid;gap:28px;grid-template-columns:repeat(3,minmax(0,1fr))}.fct-local-business-footer img{max-width:100%;height:auto;display:block}.fct-local-business-footer .s-brand{font-size:1.3rem;font-weight:700;letter-spacing:-.05em;text-decoration:none}@media(max-width:640px){.fct-local-business-footer .s-wrap{padding:30px 20px}.fct-local-business-footer .s-grid{grid-template-columns:1fr}}
.fct-local-business-footer form{min-width:0}.fct-local-business-footer fieldset{border:0;margin:0;padding:0;min-width:0;display:grid;gap:10px}.fct-local-business-footer label{font-size:.9375rem;font-weight:600}.fct-local-business-footer :is(input,textarea,select){width:100%;min-height:46px;border:1px solid currentColor;border-radius:2px;background:var(--s-bg);color:var(--s-ink);padding:11px 12px}.fct-local-business-footer textarea{resize:vertical}.fct-local-business-footer form .s-button{justify-self:start;margin-top:10px}.fct-local-business-footer .s-demo-note{font-size:.875rem;margin-top:18px}.fct-local-business-footer .s-visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.fct-local-business-footer .s-inline,.fct-local-business-footer .s-bottom{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}.fct-local-business-footer .s-inline{padding-block:10px}.fct-local-business-footer .s-bottom{border-top:1px solid currentColor;margin-top:44px;padding-top:20px;font-size:.875rem}.fct-local-business-footer .s-columns{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:34px}.fct-local-business-footer .s-columns h3{font-size:1rem;margin-bottom:15px}.fct-local-business-footer .s-columns a{display:block;min-height:44px;padding-block:8px}.fct-local-business-footer .s-columns p{margin:14px 0;line-height:1.8}.fct-local-business-footer .s-invite{padding:20px 0 65px}.fct-local-business-footer .s-email{font-size:clamp(1.5rem,4vw,3rem);display:inline-block;margin-top:28px}.fct-local-business-footer dl{margin:0}.fct-local-business-footer dd{margin:0 0 18px}.fct-local-business-footer .s-publication{display:grid;grid-template-columns:1fr 1.2fr;gap:60px}.fct-local-business-footer .s-publication h2{font-family:Georgia,serif;font-weight:400;margin-bottom:20px}.fct-local-business-footer .s-publication form{max-width:420px;margin-top:25px}@media(max-width:760px){.fct-local-business-footer .s-publication{grid-template-columns:1fr;gap:40px}}Copy JavaScript (()=>{for(const root of document.querySelectorAll('[data-snippet="local-business-footer"]')){if(root.dataset.initialized)continue;root.dataset.initialized='true';for(const form of root.querySelectorAll('[data-demo-form]')){form.querySelector('fieldset').disabled=false;form.addEventListener('submit',e=>{e.preventDefault();form.querySelector('[role=status]').textContent='Demo only: no information was sent. Connect and test your own backend for real delivery.';});}}})();
Copy Astro ---
// Generated, escaped static markup. Use a distinct prefix for each instance.
const markup = "\u003cfooter class=\"fct-local-business-footer s-footer s-business\" data-snippet=\"local-business-footer\"\u003e\u003cdiv class=\"s-wrap\"\u003e\u003cdiv class=\"s-columns\"\u003e\u003cdiv\u003e\u003ch2\u003eNorthfield\u003cbr\u003eServices.\u003c/h2\u003e\u003cp\u003e12 Example Street\u003cbr\u003eExample Town · AB1 2CD\u003c/p\u003e\u003ca href=\"tel:+441632960000\"\u003e+44 (0)1632 960000\u003c/a\u003e\u003ca href=\"mailto:office@example.com\"\u003eoffice@example.com\u003c/a\u003e\u003c/div\u003e\u003cdiv\u003e\u003ch3\u003eOpening hours\u003c/h3\u003e\u003cdl\u003e\u003cdt\u003eMonday–Friday\u003c/dt\u003e\u003cdd\u003e09:00–17:00\u003c/dd\u003e\u003cdt\u003eSaturday \u0026 Sunday\u003c/dt\u003e\u003cdd\u003eClosed\u003c/dd\u003e\u003c/dl\u003e\u003cp class=\"s-muted\"\u003eExample hours. Replace before launch.\u003c/p\u003e\u003c/div\u003e\u003cdiv\u003e\u003ch3\u003eExplore\u003c/h3\u003e\u003ca href=\"about.html\"\u003eAbout\u003c/a\u003e\u003ca href=\"work.html\"\u003eOur work\u003c/a\u003e\u003ca href=\"contact.html\"\u003eContact\u003c/a\u003e\u003c/div\u003e\u003cdiv\u003e\u003ch3\u003eUseful details\u003c/h3\u003e\u003ca href=\"services.html\"\u003eServices\u003c/a\u003e\u003ca href=\"faq.html\"\u003eQuestions\u003c/a\u003e\u003ca href=\"visit.html\"\u003eVisit us\u003c/a\u003e\u003c/div\u003e\u003c/div\u003e\u003cdiv class=\"s-bottom\"\u003e\u003cspan\u003e© 2026 North \u0026 Field · Example business\u003c/span\u003e\u003cdiv class=\"s-links\"\u003e\u003ca href=\"privacy.html\"\u003ePrivacy\u003c/a\u003e\u003ca href=\"terms.html\"\u003eTerms\u003c/a\u003e\u003c/div\u003e\u003c/div\u003e\u003c/div\u003e\u003c/footer\u003e";
---
<Fragment set:html={markup} />
<style is:global>
.fct-local-business-footer{--s-bg:#162e42;--s-ink:#ffffff;--s-accent:#e0bd80;font:16px/1.65 system-ui,sans-serif;color:var(--s-ink);background:var(--s-bg)}.fct-local-business-footer,.fct-local-business-footer *{box-sizing:border-box}.fct-local-business-footer :is(h2,h3,p,ul,figure){margin:0}.fct-local-business-footer h2,.fct-local-business-footer h3{line-height:1.2;letter-spacing:-.035em}.fct-local-business-footer h2{font-size:clamp(1.8rem,4vw,3.5rem)}.fct-local-business-footer a{color:inherit;text-underline-offset:5px;overflow-wrap:anywhere}.fct-local-business-footer :is(a,button,input,textarea,select,summary):focus-visible{outline:3px solid var(--s-accent);outline-offset:4px}.fct-local-business-footer button,.fct-local-business-footer input,.fct-local-business-footer textarea,.fct-local-business-footer select{font:inherit}.fct-local-business-footer a,.fct-local-business-footer button{touch-action:manipulation}.fct-local-business-footer .s-wrap{max-width:1200px;margin-inline:auto;padding:40px 28px}.fct-local-business-footer .s-kicker{font-size:.8125rem;letter-spacing:.13em;text-transform:uppercase;margin-bottom:18px}.fct-local-business-footer .s-button{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:11px 21px;border:1px solid currentColor;text-decoration:none;background:transparent;color:inherit;cursor:pointer;border-radius:2px;font-weight:600}.fct-local-business-footer .s-muted{opacity:.82}.fct-local-business-footer .s-links{display:flex;gap:8px 26px;flex-wrap:wrap}.fct-local-business-footer .s-links a{display:inline-flex;align-items:center;min-height:44px}.fct-local-business-footer .s-rule{border-top:1px solid currentColor;padding-top:20px;margin-top:30px}.fct-local-business-footer .s-grid{display:grid;gap:28px;grid-template-columns:repeat(3,minmax(0,1fr))}.fct-local-business-footer img{max-width:100%;height:auto;display:block}.fct-local-business-footer .s-brand{font-size:1.3rem;font-weight:700;letter-spacing:-.05em;text-decoration:none}@media(max-width:640px){.fct-local-business-footer .s-wrap{padding:30px 20px}.fct-local-business-footer .s-grid{grid-template-columns:1fr}}
.fct-local-business-footer form{min-width:0}.fct-local-business-footer fieldset{border:0;margin:0;padding:0;min-width:0;display:grid;gap:10px}.fct-local-business-footer label{font-size:.9375rem;font-weight:600}.fct-local-business-footer :is(input,textarea,select){width:100%;min-height:46px;border:1px solid currentColor;border-radius:2px;background:var(--s-bg);color:var(--s-ink);padding:11px 12px}.fct-local-business-footer textarea{resize:vertical}.fct-local-business-footer form .s-button{justify-self:start;margin-top:10px}.fct-local-business-footer .s-demo-note{font-size:.875rem;margin-top:18px}.fct-local-business-footer .s-visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.fct-local-business-footer .s-inline,.fct-local-business-footer .s-bottom{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}.fct-local-business-footer .s-inline{padding-block:10px}.fct-local-business-footer .s-bottom{border-top:1px solid currentColor;margin-top:44px;padding-top:20px;font-size:.875rem}.fct-local-business-footer .s-columns{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:34px}.fct-local-business-footer .s-columns h3{font-size:1rem;margin-bottom:15px}.fct-local-business-footer .s-columns a{display:block;min-height:44px;padding-block:8px}.fct-local-business-footer .s-columns p{margin:14px 0;line-height:1.8}.fct-local-business-footer .s-invite{padding:20px 0 65px}.fct-local-business-footer .s-email{font-size:clamp(1.5rem,4vw,3rem);display:inline-block;margin-top:28px}.fct-local-business-footer dl{margin:0}.fct-local-business-footer dd{margin:0 0 18px}.fct-local-business-footer .s-publication{display:grid;grid-template-columns:1fr 1.2fr;gap:60px}.fct-local-business-footer .s-publication h2{font-family:Georgia,serif;font-weight:400;margin-bottom:20px}.fct-local-business-footer .s-publication form{max-width:420px;margin-top:25px}@media(max-width:760px){.fct-local-business-footer .s-publication{grid-template-columns:1fr;gap:40px}}
</style>
<script is:inline>
(()=>{for(const root of document.querySelectorAll('[data-snippet="local-business-footer"]')){if(root.dataset.initialized)continue;root.dataset.initialized='true';for(const form of root.querySelectorAll('[data-demo-form]')){form.querySelector('fieldset').disabled=false;form.addEventListener('submit',e=>{e.preventDefault();form.querySelector('[role=status]').textContent='Demo only: no information was sent. Connect and test your own backend for real delivery.';});}}})();
</script>
Code tabs need JavaScript. All source formats are included in the open downloads.
Where this design fits Contact information is organized into separate address, hours and navigation columns. Telephone and email are functional link types, and all details remain editable sample content.
Address and contact links Opening-hours column Service navigation What is included The HTML ZIP includes a standalone demo, reusable markup, scoped CSS, its small JavaScript runtime, a license and setup notes. The Astro ZIP includes Snippet.astro. It can be imported into an existing Astro page or layout.
Set the right destinations Example navigation, policy and contact links must point to your actual pages. Update visible business details and telephone/email links together. Remove sections that your website does not need.
Add it to an HTML website Copy snippet.html into the relevant page section. Load snippet.css after your existing site stylesheet. The class prefix identifies this design. Load snippet.js once with defer. Keep the included keyboard behavior when adapting interactions. Replace example content and check mobile widths, zoom, links and keyboard focus in your actual website. Use it in Astro Copy Snippet.astro into src/components/, import it into your page or shared layout, and insert the component where the section belongs. Keep each generated prefix unique if you duplicate a component on one page.
Keep the section maintainable Start with the variables at the top of the CSS for background, text and accent colors. Preserve semantic labels and focus styles. Existing site selectors can still affect imported markup, so test the combined result. Read the complete setup notes .
