Footer

Bottom-level page information/navigation.

html

<footer class="foot-demo foot-demo--columns" style="background:#241430;">
  <div class="foot-demo__cols">
    <div class="foot-demo__col"><strong>Product</strong><a href="#">Features</a><a href="#">Pricing</a></div>
    <div class="foot-demo__col"><strong>Company</strong><a href="#">About</a><a href="#">Careers</a></div>
  </div>
  <div class="foot-demo__bottom">
    <span>© 2026 Clydeford</span>
    <span class="foot-demo__social"><a href="#">X</a><a href="#">in</a></span>
  </div>
</footer>
<style>
.foot-demo { font: 13px system-ui, sans-serif; color: #FAF7F2; padding: 18px 16px 14px; box-sizing: border-box; }
.foot-demo__cols { display: flex; gap: 32px; margin-bottom: 14px; }
.foot-demo--simple .foot-demo__cols { display: none; }
.foot-demo__col { display: flex; flex-direction: column; gap: 6px; }
.foot-demo__col strong { font-size: 12px; opacity: .7; margin-bottom: 2px; }
.foot-demo__col a, .foot-demo__social a { color: #FAF7F2cc; text-decoration: none; }
.foot-demo__col a:hover, .foot-demo__social a:hover { text-decoration: underline; }
.foot-demo__bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 12px; border-top: 1px solid #FAF7F233; font-size: 12px; opacity: .8; }
.foot-demo--simple .foot-demo__bottom { border-top: none; padding-top: 0; }
.foot-demo__social { display: flex; gap: 10px; }
</style>

tailwind

<footer class="font-sans text-[13px] text-[#FAF7F2] px-4 pt-[18px] pb-3.5 box-border foot-tw foot-tw--columns" style="background:#241430;">
  <div class="flex gap-8 mb-3.5 foot-tw__cols">
    <div class="flex flex-col gap-1.5"><strong class="text-xs opacity-70 mb-0.5">Product</strong><a href="#" class="text-[#FAF7F2]/80 no-underline hover:underline">Features</a><a href="#" class="text-[#FAF7F2]/80 no-underline hover:underline">Pricing</a></div>
    <div class="flex flex-col gap-1.5"><strong class="text-xs opacity-70 mb-0.5">Company</strong><a href="#" class="text-[#FAF7F2]/80 no-underline hover:underline">About</a><a href="#" class="text-[#FAF7F2]/80 no-underline hover:underline">Careers</a></div>
  </div>
  <div class="flex justify-between items-center pt-3 border-t border-[#FAF7F2]/20 text-xs opacity-80 foot-tw__bottom">
    <span>© 2026 Clydeford</span>
    <span class="flex gap-2.5"><a href="#" class="text-[#FAF7F2]/80 no-underline hover:underline">X</a><a href="#" class="text-[#FAF7F2]/80 no-underline hover:underline">in</a></span>
  </div>
</footer>
<style>
.foot-tw--simple .foot-tw__cols { display: none; }
.foot-tw--simple .foot-tw__bottom { border-top: none !important; padding-top: 0 !important; }
</style>

react

export function Footer({
  text = "© 2026 Clydeford",
  layout = "columns",
  bg = "#241430",
  social = true,
}) {
  const simple = layout === "simple";
  return (
    <footer style={{ fontFamily: "system-ui, sans-serif", fontSize: 13, color: "#FAF7F2", background: bg, padding: "18px 16px 14px", boxSizing: "border-box" }}>
      {!simple && (
        <div style={{ display: "flex", gap: 32, marginBottom: 14 }}>
          <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
            <strong style={{ fontSize: 12, opacity: .7 }}>Product</strong>
            <a href="#" style={{ color: "#FAF7F2cc", textDecoration: "none" }}>Features</a>
            <a href="#" style={{ color: "#FAF7F2cc", textDecoration: "none" }}>Pricing</a>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
            <strong style={{ fontSize: 12, opacity: .7 }}>Company</strong>
            <a href="#" style={{ color: "#FAF7F2cc", textDecoration: "none" }}>About</a>
            <a href="#" style={{ color: "#FAF7F2cc", textDecoration: "none" }}>Careers</a>
          </div>
        </div>
      )}
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", paddingTop: simple ? 0 : 12, borderTop: simple ? "none" : "1px solid #FAF7F233", fontSize: 12, opacity: .8 }}>
        <span>{text}</span>
        {social && <span style={{ display: "flex", gap: 10 }}><a href="#" style={{ color: "#FAF7F2cc", textDecoration: "none" }}>X</a><a href="#" style={{ color: "#FAF7F2cc", textDecoration: "none" }}>in</a></span>}
      </div>
    </footer>
  );
}