Library · Social Proof

Social Proof / Logo Wall

"As trusted by" responsive grid of client/partner logos, with optional greyscale-to-colour on hover/focus. Static — no JS. Tone via the shared contract.

Figma: Social Proof / Logo Wall ↗

Live preview — edit theme bottom-right

---
import LogoWall from "../components/figma/LogoWall.astro";

// Inline placeholder marks (data-URI SVGs) so the story renders without external assets.
const mark = (label: string) =>
  `data:image/svg+xml;utf8,` +
  encodeURIComponent(
    `<svg xmlns="http://www.w3.org/2000/svg" width="160" height="48"><rect width="160" height="48" rx="6" fill="none" stroke="#888" stroke-width="1.5"/><text x="80" y="30" font-family="sans-serif" font-size="16" fill="#555" text-anchor="middle">${label}</text></svg>`,
  );
---
<LogoWall
  heading="Trusted by property developers Australia-wide"
  tone="base-100"
  columns={5}
  logos={[
    { src: mark("Frasers"), alt: "Frasers Property", href: "#" },
    { src: mark("Oliver Hume"), alt: "Oliver Hume" },
    { src: mark("Brookfield"), alt: "Brookfield", href: "#" },
    { src: mark("Mirvac"), alt: "Mirvac" },
    { src: mark("Stockland"), alt: "Stockland" },
  ]}
/>

Props

Name	Type	Required	Description
`heading`	`string;`	—	Optional heading (e.g. "Trusted by")
`logos`	`Logo[];`	Yes	Logos to display
`columns`	`number;`	—	Max logos per row on wide screens (default: 5)
`grayscale`	`boolean;`	—	Render logos greyscale until hover/focus (default: true)
`tone`	`"base-100" \| "base-200" \| "base-300" \| "primary" \| "secondary" \| "neutral";`	—	Background tone — the Figma colour-variant axis

Example with all props

<LogoWall
  heading="Trusted by property developers Australia-wide"
  tone="base-100"
  columns={5}
  logos={[
    { src: "/logos/frasers.svg", alt: "Frasers Property", href: "#" },
    { src: "/logos/oliver-hume.svg", alt: "Oliver Hume" },
  ]}
/>