Library · Footers

Footer / 2 Columns

Two-column footer — logo left, address + phone + social icons right-aligned, divider, then copyright/legal strip. Built on Section (as="footer"); tone via the shared contract.

Figma: Footer / Standard | 2 cols ↗ View Elementor template in 8020 ↗
Live preview — edit theme bottom-right 
---
import FooterTwoCol from "../components/figma/FooterTwoCol.astro";
const socials = [{ platform: "facebook", url: "#" }, { platform: "instagram", url: "#" }];
const legalLinks = [{ label: "Privacy Policy", href: "/privacy" }, { label: "Disclaimer", href: "/disclaimer" }];
---
<FooterTwoCol
  logoText="LogoIpsum"
  address="123 XYZ Street, Suburb, QLD, 4000"
  phone="07 XXXX XXXX"
  socials={socials}
  legalLinks={legalLinks}
  copyrightName="Company name"
  credit="plumpartners"
  creditUrl="#"
  tone="primary"
/>

Props

NameTypeRequiredDescription
logoText string —
logoImage string —
logoAlt string —
logoUrl string —
phone string —
address string —
socials SocialLink[] —
legalLinks LegalLink[] —
copyrightName string —
credit string —
creditUrl string —
tone "base-100" | "base-200" | "base-300" | "primary" | "secondary" | "neutral" — Background tone — the Figma colour-variant axis

Example with all props

<FooterTwoCol
  logoText="Company XYZ"
  address="123 XYZ Street, Suburb, QLD, 4000"
  phone="07 3123 4567"
  socials={[{ platform: "facebook", url: "#" }, { platform: "instagram", url: "#" }]}
  legalLinks={[{ label: "Privacy Policy", href: "/privacy" }, { label: "Disclaimer", href: "/disclaimer" }]}
  copyrightName="Company name"
  credit="iCreate Agency"
  tone="primary"
/>