Library · Footers

Footer / Standard

Standard site footer — logo left, contact block + circular social icons right, divider, then copyright/legal-links strip with optional agency credit. Built on Section (as="footer"); tone via the shared contract.

Figma: Footer / Standard ↗ View Elementor template in 8020 ↗
Live preview — edit theme bottom-right 
---
import FooterStandard from "../components/figma/FooterStandard.astro";

const socials = [
  { platform: "facebook", url: "#" },
  { platform: "instagram", url: "#" },
];
const legalLinks = [
  { label: "Disclaimer", href: "#" },
  { label: "Privacy Policy", href: "#" },
];
---
<FooterStandard
  logoText="Logoipsum"
  phone="07 3123 4567"
  email="email@yourcompany.com"
  address="123 XYZ Street, Suburb, QLD, 4000"
  socials={socials}
  legalLinks={legalLinks}
  copyrightName="Company XYZ"
  credit="iCreate Agency"
  creditUrl="https://icreate.agency"
/>
<FooterStandard
  logoText="Logoipsum"
  phone="07 3123 4567"
  email="email@yourcompany.com"
  address="123 XYZ Street, Suburb, QLD, 4000"
  socials={socials}
  legalLinks={legalLinks}
  copyrightName="Company XYZ"
  tone="primary"
/>

Props

NameTypeRequiredDescription
logoText string — Text logo (rendered when no logoImage)
logoImage string — Image logo URL — overrides logoText
logoAlt string —
logoUrl string —
phone string —
email string —
address string — Street address line
socials SocialLink[] — Social icon links: { platform: icon name, url }
legalLinks LegalLink[] — Small links after the copyright line (Disclaimer, Privacy Policy…)
copyrightName string — Name in the © line (year is stamped at build time)
credit string — Optional agency credit, bottom-right
creditUrl string —
tone "base-100" | "base-200" | "base-300" | "primary" | "secondary" | "neutral" — Background tone — the Figma colour-variant axis

Example with all props

---
const socials = [
  { platform: "facebook", url: "https://facebook.com/companyxyz" },
  { platform: "instagram", url: "https://instagram.com/companyxyz" },
];
const legalLinks = [
  { label: "Disclaimer", href: "/disclaimer" },
  { label: "Privacy Policy", href: "/privacy" },
];
---
<FooterStandard
  logoText="Company XYZ"
  phone="07 3123 4567"
  email="email@yourcompany.com"
  address="123 XYZ Street, Suburb, QLD, 4000"
  socials={socials}
  legalLinks={legalLinks}
  copyrightName="Company XYZ"
  credit="iCreate Agency"
  creditUrl="https://icreate.agency"
  tone="primary"
/>