Blocks / Site Footer

Site Footer beta

The bottom of the page, treated as navigation: sitemap columns, a newsletter that asks once, and the legal line.

Preview

Built from: Input, Button — include their CSS alongside this block.

<footer class="k-ftr" style="max-width:760px">
  <div class="k-ftr-top">
    <div>
      <div class="brand"><span class="mk"><i></i></span>Acme Studio</div>
      <p class="tag">Invoicing and books for small teams, kept in one ledger.</p>
    </div>
    <div class="col"><h6>Product</h6><a href="#">Features</a><a href="#">Pricing</a><a href="#">Changelog</a><a href="#">Roadmap</a></div>
    <div class="col"><h6>Company</h6><a href="#">About</a><a href="#">Careers</a><a href="#">Press</a><a href="#">Contact</a></div>
    <div class="news">
      <h6>The monthly ledger</h6>
      <p>One email a month: what shipped, what broke, what we learned. No growth hacks.</p>
      <div class="row"><input class="input" type="email" placeholder="[email protected]" aria-label="Email address" style="flex:1;min-width:0"><button class="btn btn-pri btn-md">Subscribe</button></div>
    </div>
  </div>
  <div class="k-ftr-bot">
    <span>© 2026 Acme Studio, Inc.</span><a href="#" style="color:inherit;text-decoration:none">Privacy</a><a href="#" style="color:inherit;text-decoration:none">Terms</a><a href="#" style="color:inherit;text-decoration:none">Security</a>
    <span class="soc"><a href="#" aria-label="GitHub"><svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2.8a9.2 9.2 0 0 0-9.2 9.2c0 4.1 2.7 7.6 6.4 9 .5.1.6-.2.6-.4v-1.4c-2.6.6-3.1-1.2-3.1-1.2-.4-1.1-1-1.3-1-1.3-.9-.6.1-.6.1-.6.9.1 1.4.9 1.4.9.9 1.4 2.2 1 2.7.8.1-.6.3-1.1.6-1.3-2.1-.2-4.2-1-4.2-4.6 0-1 .4-1.8.9-2.5-.1-.2-.4-1.1.1-2.3 0 0 .8-.2 2.5.9a8.6 8.6 0 0 1 4.5 0c1.7-1.1 2.5-.9 2.5-.9.5 1.2.2 2.1.1 2.3.5.7.9 1.5.9 2.5 0 3.6-2.2 4.4-4.2 4.6.3.3.6.9.6 1.8v2.6c0 .2.2.5.6.4a9.2 9.2 0 0 0 6.4-9A9.2 9.2 0 0 0 12 2.8z"/></svg></a><a href="#" aria-label="X"><svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M4 3l6.9 9.3L4.4 21h2.9l5-6.3 4 6.3H20l-7.2-9.7L19.4 3h-2.9l-4.4 5.6L8.4 3H4z"/></svg></a><a href="#" aria-label="YouTube"><svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M21.6 7.1a2.8 2.8 0 0 0-2-2C17.9 4.7 12 4.7 12 4.7s-5.9 0-7.6.4a2.8 2.8 0 0 0-2 2A29 29 0 0 0 2 12a29 29 0 0 0 .4 4.9 2.8 2.8 0 0 0 2 2c1.7.4 7.6.4 7.6.4s5.9 0 7.6-.4a2.8 2.8 0 0 0 2-2A29 29 0 0 0 22 12a29 29 0 0 0-.4-4.9zM10 15.3V8.7L15.6 12 10 15.3z"/></svg></a></span>
  </div>
</footer>

.k-ftr{font-family:var(--k-font);text-align:left;color:var(--k-ink);border:1px solid var(--k-line);border-radius:14px;background:var(--k-bg);padding:26px}
.k-ftr-top{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.4fr;gap:24px}
@media (max-width:720px){.k-ftr-top{grid-template-columns:1fr 1fr}}
.k-ftr .brand{display:flex;align-items:center;gap:9px;font-weight:650;font-size:15px}
.k-ftr .brand .mk{width:22px;height:22px;border:2.5px solid var(--k-ink);border-radius:7px;display:grid;place-items:center}
.k-ftr .brand .mk i{width:7px;height:7px;border-radius:2.5px;background:var(--k-core);display:block}
.k-ftr .tag{margin-top:10px;font-size:12.5px;line-height:1.7;color:var(--k-ink-2);max-width:26ch}
.k-ftr h6{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--k-ink-3);font-weight:600;margin-bottom:11px}
.k-ftr .col a{display:block;font-size:13px;color:var(--k-ink-2);text-decoration:none;padding:3.5px 0}
.k-ftr .col a:hover{color:var(--k-ink)}
.k-ftr .news p{font-size:12.5px;line-height:1.7;color:var(--k-ink-2);margin-bottom:10px}
.k-ftr .news .row{display:flex;gap:8px}
.k-ftr-bot{display:flex;align-items:center;gap:16px;border-top:1px solid var(--k-line);margin-top:24px;padding-top:16px;font-size:12px;color:var(--k-ink-3);flex-wrap:wrap}
.k-ftr-bot .soc{display:flex;gap:7px;margin-left:auto}
.k-ftr-bot .soc a{width:29px;height:29px;border:1px solid var(--k-line);border-radius:8px;display:grid;place-items:center;color:var(--k-ink-2)}

Usage

For the end of every marketing page. The footer is where undecided visitors look for proof the company exists — address, legal links, a working contact.

Settings

Site Header