Library · Footers

Footer / Centered - 3 Columns

Centre-aligned footer — logo centred on a rule, then Quick Links / Contact Us / Social columns, a rule, and the copyright/legal strip. Tone via the shared contract.

Figma: Footer / Center Aligned - 3 Columns ↗ View Elementor template in 8020 ↗

Live preview — edit theme bottom-right

---
import FooterCentered from "../components/figma/FooterCentered.astro";
const quickLinks = [
  { label: "Home", href: "/" }, { label: "Selling", href: "/selling" }, { label: "About Us", href: "/about" },
  { label: "Insights", href: "/insights" }, { label: "Contact Us", href: "/contact" },
];
const socials = [{ platform: "Facebook", url: "#" }, { platform: "LinkedIn", url: "#" }, { platform: "Instagram", url: "#" }];
const legalLinks = [{ label: "Disclaimer", href: "/disclaimer" }, { label: "Privacy Policy", href: "/privacy" }];
---
<FooterCentered
  logoText="LogoIpsum"
  quickLinks={quickLinks}
  phone="07 XXXX XXXX"
  email="email@yourcompany.com"
  address="123 XYZ Street, Suburb, QLD, 4000"
  socials={socials}
  legalLinks={legalLinks}
  copyrightName="XYZ Co"
  credit="plumpartners"
  creditUrl="#"
  tone="base-200"
/>

Props

Name	Type	Required	Description
`logoText`	`string`	—
`logoImage`	`string`	—
`logoAlt`	`string`	—
`logoUrl`	`string`	—
`quickLinks`	`NavLink[]`	—	Quick-links nav items
`phone`	`string`	—
`email`	`string`	—
`address`	`string`	—
`socials`	`SocialLink[]`	—	Social links rendered as text labels
`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

<FooterCentered
  logoText="Company XYZ"
  quickLinks={[{ label: "Home", href: "/" }, { label: "About Us", href: "/about" }]}
  phone="07 XXXX XXXX"
  email="email@yourcompany.com"
  address="123 XYZ Street, Suburb, QLD, 4000"
  socials={[{ platform: "Facebook", url: "#" }, { platform: "LinkedIn", url: "#" }, { platform: "Instagram", url: "#" }]}
  legalLinks={[{ label: "Disclaimer", href: "/disclaimer" }, { label: "Privacy Policy", href: "/privacy" }]}
  copyrightName="XYZ Co"
  credit="iCreate Agency"
  tone="primary"
/>