Library · Footers

Footer / Quicklinks

Footer with logo + social icons left, and Contact Us (icon-led) + Quick Links (menu) columns right, each under a short rule; divider and copyright/legal strip. Tone via the shared contract.

Figma: Footer / Quicklinks ↗ View Elementor template in 8020 ↗

Live preview — edit theme bottom-right

---
import FooterQuicklinks from "../components/figma/FooterQuicklinks.astro";
const socials = [{ platform: "facebook", url: "#" }, { platform: "instagram", url: "#" }, { platform: "linkedin", url: "#" }];
const quickLinks = [
  { label: "Home", href: "/" }, { label: "About Us", href: "/about" },
  { label: "Testimonials", href: "/testimonials" }, { label: "Contact Us", href: "/contact" },
];
const legalLinks = [{ label: "Privacy Policy", href: "/privacy" }, { label: "Disclaimer", href: "/disclaimer" }];
---
<FooterQuicklinks
  logoText="LogoIpsum"
  socials={socials}
  phone="07 XXXX XXXX"
  email="email@yourcompany.com"
  address="123 XYZ Street, Suburb, QLD, 4000"
  quickLinks={quickLinks}
  legalLinks={legalLinks}
  copyrightName="Company XYZ"
  credit="plumpartners"
  creditUrl="#"
  tone="primary"
/>

Props

Name	Type	Required	Description
`logoText`	`string`	—
`logoImage`	`string`	—
`logoAlt`	`string`	—
`logoUrl`	`string`	—
`socials`	`SocialLink[]`	—
`phone`	`string`	—
`email`	`string`	—
`address`	`string`	—
`quickLinks`	`NavLink[]`	—	Quick-links menu items (rendered in a 2-column grid)
`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

<FooterQuicklinks
  logoText="Company XYZ"
  socials={[{ platform: "youtube", url: "#" }, { platform: "facebook", url: "#" }, { platform: "instagram", url: "#" }]}
  phone="07 XXXX XXXX"
  email="email@yourcompany.com"
  address="123 XYZ Street, Suburb, QLD, 4000"
  quickLinks={[{ label: "Home", href: "/" }, { label: "About Us", href: "/about" }, { label: "Testimonials", href: "/testimonials" }, { label: "Contact Us", href: "/contact" }]}
  legalLinks={[{ label: "Privacy Policy", href: "/privacy" }, { label: "Disclaimer", href: "/disclaimer" }]}
  copyrightName="Company XYZ"
  credit="iCreate Agency"
  tone="primary"
/>