Home / Snippets / Footers / Shop directory 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-shop-directory-footer s-footer s-shop" data-snippet="shop-directory-footer"><div class="s-wrap"><div class="s-columns"><div><a class="s-brand" href="index.html">Everyday.</a><p>Useful objects,<br>chosen with care.</p></div><div><h3>Shop</h3><a href="new.html">New arrivals</a><a href="home.html">Home & living</a><a href="shop.html">All products</a></div><div><h3>Customer care</h3><a href="delivery.html">Delivery</a><a href="returns.html">Returns</a><a href="contact.html">Contact</a></div><div><h3>Notes from the store</h3><p>Optional news and new collections.</p><form data-demo-form action="#" method="post" aria-label="Newsletter signup"><fieldset disabled><legend class="s-visually-hidden">Newsletter signup details</legend><label for="fct-shop-directory-footer-email">Email (required)</label><input id="fct-shop-directory-footer-email" name="email" type="email" required autocomplete="email" maxlength="254"><button type="submit" class="s-button">Request updates</button></fieldset><p class="s-demo-note" role="status">Demonstration only. Connect your backend before collecting information.</p></form></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-shop-directory-footer{--s-bg:#f7f4eb;--s-ink:#252d26;--s-accent:#4b5d36;font:16px/1.65 system-ui,sans-serif;color:var(--s-ink);background:var(--s-bg)}.fct-shop-directory-footer,.fct-shop-directory-footer *{box-sizing:border-box}.fct-shop-directory-footer :is(h2,h3,p,ul,figure){margin:0}.fct-shop-directory-footer h2,.fct-shop-directory-footer h3{line-height:1.2;letter-spacing:-.035em}.fct-shop-directory-footer h2{font-size:clamp(1.8rem,4vw,3.5rem)}.fct-shop-directory-footer a{color:inherit;text-underline-offset:5px;overflow-wrap:anywhere}.fct-shop-directory-footer :is(a,button,input,textarea,select,summary):focus-visible{outline:3px solid var(--s-accent);outline-offset:4px}.fct-shop-directory-footer button,.fct-shop-directory-footer input,.fct-shop-directory-footer textarea,.fct-shop-directory-footer select{font:inherit}.fct-shop-directory-footer a,.fct-shop-directory-footer button{touch-action:manipulation}.fct-shop-directory-footer .s-wrap{max-width:1200px;margin-inline:auto;padding:40px 28px}.fct-shop-directory-footer .s-kicker{font-size:.8125rem;letter-spacing:.13em;text-transform:uppercase;margin-bottom:18px}.fct-shop-directory-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-shop-directory-footer .s-muted{opacity:.82}.fct-shop-directory-footer .s-links{display:flex;gap:8px 26px;flex-wrap:wrap}.fct-shop-directory-footer .s-links a{display:inline-flex;align-items:center;min-height:44px}.fct-shop-directory-footer .s-rule{border-top:1px solid currentColor;padding-top:20px;margin-top:30px}.fct-shop-directory-footer .s-grid{display:grid;gap:28px;grid-template-columns:repeat(3,minmax(0,1fr))}.fct-shop-directory-footer img{max-width:100%;height:auto;display:block}.fct-shop-directory-footer .s-brand{font-size:1.3rem;font-weight:700;letter-spacing:-.05em;text-decoration:none}@media(max-width:640px){.fct-shop-directory-footer .s-wrap{padding:30px 20px}.fct-shop-directory-footer .s-grid{grid-template-columns:1fr}}
.fct-shop-directory-footer form{min-width:0}.fct-shop-directory-footer fieldset{border:0;margin:0;padding:0;min-width:0;display:grid;gap:10px}.fct-shop-directory-footer label{font-size:.9375rem;font-weight:600}.fct-shop-directory-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-shop-directory-footer textarea{resize:vertical}.fct-shop-directory-footer form .s-button{justify-self:start;margin-top:10px}.fct-shop-directory-footer .s-demo-note{font-size:.875rem;margin-top:18px}.fct-shop-directory-footer .s-visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.fct-shop-directory-footer .s-inline,.fct-shop-directory-footer .s-bottom{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}.fct-shop-directory-footer .s-inline{padding-block:10px}.fct-shop-directory-footer .s-bottom{border-top:1px solid currentColor;margin-top:44px;padding-top:20px;font-size:.875rem}.fct-shop-directory-footer .s-columns{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:34px}.fct-shop-directory-footer .s-columns h3{font-size:1rem;margin-bottom:15px}.fct-shop-directory-footer .s-columns a{display:block;min-height:44px;padding-block:8px}.fct-shop-directory-footer .s-columns p{margin:14px 0;line-height:1.8}.fct-shop-directory-footer .s-invite{padding:20px 0 65px}.fct-shop-directory-footer .s-email{font-size:clamp(1.5rem,4vw,3rem);display:inline-block;margin-top:28px}.fct-shop-directory-footer dl{margin:0}.fct-shop-directory-footer dd{margin:0 0 18px}.fct-shop-directory-footer .s-publication{display:grid;grid-template-columns:1fr 1.2fr;gap:60px}.fct-shop-directory-footer .s-publication h2{font-family:Georgia,serif;font-weight:400;margin-bottom:20px}.fct-shop-directory-footer .s-publication form{max-width:420px;margin-top:25px}@media(max-width:760px){.fct-shop-directory-footer .s-publication{grid-template-columns:1fr;gap:40px}}Copy JavaScript (()=>{for(const root of document.querySelectorAll('[data-snippet="shop-directory-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-shop-directory-footer s-footer s-shop\" data-snippet=\"shop-directory-footer\"\u003e\u003cdiv class=\"s-wrap\"\u003e\u003cdiv class=\"s-columns\"\u003e\u003cdiv\u003e\u003ca class=\"s-brand\" href=\"index.html\"\u003eEveryday.\u003c/a\u003e\u003cp\u003eUseful objects,\u003cbr\u003echosen with care.\u003c/p\u003e\u003c/div\u003e\u003cdiv\u003e\u003ch3\u003eShop\u003c/h3\u003e\u003ca href=\"new.html\"\u003eNew arrivals\u003c/a\u003e\u003ca href=\"home.html\"\u003eHome \u0026 living\u003c/a\u003e\u003ca href=\"shop.html\"\u003eAll products\u003c/a\u003e\u003c/div\u003e\u003cdiv\u003e\u003ch3\u003eCustomer care\u003c/h3\u003e\u003ca href=\"delivery.html\"\u003eDelivery\u003c/a\u003e\u003ca href=\"returns.html\"\u003eReturns\u003c/a\u003e\u003ca href=\"contact.html\"\u003eContact\u003c/a\u003e\u003c/div\u003e\u003cdiv\u003e\u003ch3\u003eNotes from the store\u003c/h3\u003e\u003cp\u003eOptional news and new collections.\u003c/p\u003e\u003cform data-demo-form action=\"#\" method=\"post\" aria-label=\"Newsletter signup\"\u003e\u003cfieldset disabled\u003e\u003clegend class=\"s-visually-hidden\"\u003eNewsletter signup details\u003c/legend\u003e\u003clabel for=\"fct-shop-directory-footer-email\"\u003eEmail (required)\u003c/label\u003e\u003cinput id=\"fct-shop-directory-footer-email\" name=\"email\" type=\"email\" required autocomplete=\"email\" maxlength=\"254\"\u003e\u003cbutton type=\"submit\" class=\"s-button\"\u003eRequest updates\u003c/button\u003e\u003c/fieldset\u003e\u003cp class=\"s-demo-note\" role=\"status\"\u003eDemonstration only. Connect your backend before collecting information.\u003c/p\u003e\u003c/form\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-shop-directory-footer{--s-bg:#f7f4eb;--s-ink:#252d26;--s-accent:#4b5d36;font:16px/1.65 system-ui,sans-serif;color:var(--s-ink);background:var(--s-bg)}.fct-shop-directory-footer,.fct-shop-directory-footer *{box-sizing:border-box}.fct-shop-directory-footer :is(h2,h3,p,ul,figure){margin:0}.fct-shop-directory-footer h2,.fct-shop-directory-footer h3{line-height:1.2;letter-spacing:-.035em}.fct-shop-directory-footer h2{font-size:clamp(1.8rem,4vw,3.5rem)}.fct-shop-directory-footer a{color:inherit;text-underline-offset:5px;overflow-wrap:anywhere}.fct-shop-directory-footer :is(a,button,input,textarea,select,summary):focus-visible{outline:3px solid var(--s-accent);outline-offset:4px}.fct-shop-directory-footer button,.fct-shop-directory-footer input,.fct-shop-directory-footer textarea,.fct-shop-directory-footer select{font:inherit}.fct-shop-directory-footer a,.fct-shop-directory-footer button{touch-action:manipulation}.fct-shop-directory-footer .s-wrap{max-width:1200px;margin-inline:auto;padding:40px 28px}.fct-shop-directory-footer .s-kicker{font-size:.8125rem;letter-spacing:.13em;text-transform:uppercase;margin-bottom:18px}.fct-shop-directory-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-shop-directory-footer .s-muted{opacity:.82}.fct-shop-directory-footer .s-links{display:flex;gap:8px 26px;flex-wrap:wrap}.fct-shop-directory-footer .s-links a{display:inline-flex;align-items:center;min-height:44px}.fct-shop-directory-footer .s-rule{border-top:1px solid currentColor;padding-top:20px;margin-top:30px}.fct-shop-directory-footer .s-grid{display:grid;gap:28px;grid-template-columns:repeat(3,minmax(0,1fr))}.fct-shop-directory-footer img{max-width:100%;height:auto;display:block}.fct-shop-directory-footer .s-brand{font-size:1.3rem;font-weight:700;letter-spacing:-.05em;text-decoration:none}@media(max-width:640px){.fct-shop-directory-footer .s-wrap{padding:30px 20px}.fct-shop-directory-footer .s-grid{grid-template-columns:1fr}}
.fct-shop-directory-footer form{min-width:0}.fct-shop-directory-footer fieldset{border:0;margin:0;padding:0;min-width:0;display:grid;gap:10px}.fct-shop-directory-footer label{font-size:.9375rem;font-weight:600}.fct-shop-directory-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-shop-directory-footer textarea{resize:vertical}.fct-shop-directory-footer form .s-button{justify-self:start;margin-top:10px}.fct-shop-directory-footer .s-demo-note{font-size:.875rem;margin-top:18px}.fct-shop-directory-footer .s-visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.fct-shop-directory-footer .s-inline,.fct-shop-directory-footer .s-bottom{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}.fct-shop-directory-footer .s-inline{padding-block:10px}.fct-shop-directory-footer .s-bottom{border-top:1px solid currentColor;margin-top:44px;padding-top:20px;font-size:.875rem}.fct-shop-directory-footer .s-columns{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:34px}.fct-shop-directory-footer .s-columns h3{font-size:1rem;margin-bottom:15px}.fct-shop-directory-footer .s-columns a{display:block;min-height:44px;padding-block:8px}.fct-shop-directory-footer .s-columns p{margin:14px 0;line-height:1.8}.fct-shop-directory-footer .s-invite{padding:20px 0 65px}.fct-shop-directory-footer .s-email{font-size:clamp(1.5rem,4vw,3rem);display:inline-block;margin-top:28px}.fct-shop-directory-footer dl{margin:0}.fct-shop-directory-footer dd{margin:0 0 18px}.fct-shop-directory-footer .s-publication{display:grid;grid-template-columns:1fr 1.2fr;gap:60px}.fct-shop-directory-footer .s-publication h2{font-family:Georgia,serif;font-weight:400;margin-bottom:20px}.fct-shop-directory-footer .s-publication form{max-width:420px;margin-top:25px}@media(max-width:760px){.fct-shop-directory-footer .s-publication{grid-template-columns:1fr;gap:40px}}
</style>
<script is:inline>
(()=>{for(const root of document.querySelectorAll('[data-snippet="shop-directory-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 The directory separates shopping from customer-service information. Its newsletter form is a local demonstration, with disabled source fields until its demo enhancement runs.
Customer-service directory Category navigation Backend-ready newsletter markup 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.
Connect a real form backend These forms demonstrate layout and native browser validation. No messages are sent. Configure the form action, remove the demo interception and disabled fieldset, then implement delivery, server validation and spam handling on your backend. Test actual success and error responses before publishing. An appointment request does not confirm availability.
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 .
