Library · Footers

Footer / Background Image

Full-bleed footer over a background photo with a legibility scrim — centred logo, social icons, phone and address in white, then the copyright/legal strip. Not toned (white on photo by design, like HeroStandard).

Figma: Footer / Centred / Background Image ↗ View Elementor template in 8020 ↗

Live preview — edit theme bottom-right

---
import FooterBackgroundImage from "../components/figma/FooterBackgroundImage.astro";
const socials = [{ platform: "facebook", url: "#" }, { platform: "instagram", url: "#" }];
const legalLinks = [{ label: "Disclaimer", href: "/disclaimer" }, { label: "Privacy Policy", href: "/privacy" }];
---
<FooterBackgroundImage
  image="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=1600&q=60"
  logoText="LogoIpsum"
  socials={socials}
  phone="07 XXXX XXXX"
  address="123 XYZ Street, Suburb, QLD, 4000"
  legalLinks={legalLinks}
  copyrightName="Company Name"
  credit="plumpartners"
  creditUrl="#"
/>

Props

Name	Type	Required	Description
`image`	`string`	Yes	Background photo URL
`logoText`	`string`	—
`logoImage`	`string`	—
`logoAlt`	`string`	—
`logoUrl`	`string`	—
`socials`	`SocialLink[]`	—
`phone`	`string`	—
`address`	`string`	—
`legalLinks`	`LegalLink[]`	—
`copyrightName`	`string`	—
`credit`	`string`	—
`creditUrl`	`string`	—

Example with all props

<FooterBackgroundImage
  image="/images/coastline.jpg"
  logoText="Company XYZ"
  socials={[{ platform: "facebook", url: "#" }, { platform: "instagram", url: "#" }]}
  phone="07 XXXX XXXX"
  address="123 XYZ Street, Suburb, QLD, 4000"
  legalLinks={[{ label: "Disclaimer", href: "/disclaimer" }, { label: "Privacy Policy", href: "/privacy" }]}
  copyrightName="Company Name"
  credit="iCreate Agency"
/>