footer

Footer for a page or section.

html

<div class="foot-demo foot-demo--page">
  <p class="foot-demo__scope">Scope: <strong>&lt;page&gt;</strong> footer</p>
  <footer class="foot" style="--accent:#241430;">
    
    <nav class="foot__links"><a href="#">Privacy</a><a href="#">Terms</a><a href="#">Contact</a></nav>
    
    <p class="foot__copy">© 2026 Studio Ltd. All rights reserved.</p>
  </footer>
</div>
<style>
.foot-demo { width: 340px; box-sizing: border-box; font: 13px/1.5 system-ui, sans-serif; }
.foot-demo__scope { margin: 0 0 8px; font-size: 12px; color: #241430888; }
.foot { background: #FAF7F2; border-top: 3px solid var(--accent); padding: 16px 18px; border-radius: 0 0 10px 10px; }
.foot__links { display: flex; gap: 14px; margin: 0 0 10px; }
.foot__links a { color: var(--accent); font-weight: 600; text-decoration: none; font-size: 13px; }
.foot__links a:hover { text-decoration: underline; }
.foot__copy { margin: 0; color: #241430aa; font-size: 12px; }
</style>

tailwind

<div class="w-[340px] box-border font-sans text-[13px]">
  <p class="m-0 mb-2 text-xs text-[#241430]/55">Scope: <strong>&lt;page&gt;</strong> footer</p>
  <footer class="foot-tw foot-tw--page bg-[#FAF7F2] border-t-[3px] px-[18px] py-4 rounded-b-[10px]" style="border-color:#241430">
    
    <nav class="flex gap-3.5 mb-2.5"><a href="#" class="font-semibold text-[13px] no-underline hover:underline" style="color:#241430">Privacy</a><a href="#" class="font-semibold text-[13px] no-underline hover:underline" style="color:#241430">Terms</a><a href="#" class="font-semibold text-[13px] no-underline hover:underline" style="color:#241430">Contact</a></nav>
    
    <p class="m-0 text-[#241430]/65 text-xs">© 2026 Studio Ltd. All rights reserved.</p>
  </footer>
</div>

react

export function FooterElement({
  text = "© 2026 Studio Ltd. All rights reserved.",
  scope = "page",
  accent = "#241430",
  showLinks = true,
}) {
  return (
    <div style={{ width: 340, boxSizing: "border-box", font: "13px/1.5 system-ui, sans-serif" }}>
      <p style={{ margin: "0 0 8px", fontSize: 12, color: "#241430888" }}>Scope: <strong>{`<${scope}>`}</strong> footer</p>
      <footer style={{ background: "#FAF7F2", borderTop: `3px solid ${accent}`, padding: "16px 18px", borderRadius: scope === "article" ? 10 : "0 0 10px 10px" }}>
        {showLinks && (
          <nav style={{ display: "flex", gap: 14, marginBottom: 10 }}>
            <a href="#" style={{ color: accent, fontWeight: 600, fontSize: 13, textDecoration: "none" }}>Privacy</a>
            <a href="#" style={{ color: accent, fontWeight: 600, fontSize: 13, textDecoration: "none" }}>Terms</a>
            <a href="#" style={{ color: accent, fontWeight: 600, fontSize: 13, textDecoration: "none" }}>Contact</a>
          </nav>
        )}
        <p style={{ margin: 0, color: "#241430aa", fontSize: 12 }}>{text}</p>
      </footer>
    </div>
  );
}