Footers

Simple, 4-column, social, mission, and newsletter footer variants.

Preview

4-column with newsletter + social

Simple centered

Simple with social

React preview

LiveView (HEEx)

alias DesignSystem.UI.Footers

<Footers.footer
  variant="4-column"
  newsletter
  social_links={[
    %{name: "facebook", href: "#"},
    %{name: "x", href: "#"}
  ]}
  nav_groups={[
    %{
      heading: "Solutions",
      links: [%{label: "Marketing", href: "#"}, %{label: "Analytics", href: "#"}]
    },
    %{
      heading: "Support",
      links: [%{label: "Docs", href: "#"}, %{label: "Guides", href: "#"}]
    }
  ]}
  copyright="© 2026 Acme, Inc."
/>

React (JSX)

import { Footer } from "../ui/index.mjs"

<Footer
  variant="4-column"
  newsletter
  socialLinks={[
    { name: "facebook", href: "#" },
    { name: "x", href: "#" },
  ]}
  navGroups={[
    {
      heading: "Solutions",
      links: [{ label: "Marketing", href: "#" }, { label: "Analytics", href: "#" }],
    },
    {
      heading: "Support",
      links: [{ label: "Docs", href: "#" }, { label: "Guides", href: "#" }],
    },
  ]}
  copyright="© 2026 Acme, Inc."
/>