Library · Social Proof

Social Proof / Case Study Spotlight

Featured case study — challenge/result narrative beside a feature image, with a headline metric (optional count-up; the final value is server-rendered so no-JS shows it). Tone via the shared contract.

Figma: Social Proof / Case Study Spotlight ↗

Live preview — edit theme bottom-right

---
import CaseStudySpotlight from "../components/figma/CaseStudySpotlight.astro";
const img = (label, w, h) =>
  `data:image/svg+xml;utf8,` +
  encodeURIComponent(
    `<svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${h}"><rect width="${w}" height="${h}" fill="#c9c2b8"/><text x="${w/2}" y="${h/2}" font-family="sans-serif" font-size="20" fill="#5b5346" text-anchor="middle" dominant-baseline="middle">${label}</text></svg>`,
  );
---
<CaseStudySpotlight
  client="Riverside Developments"
  image={{ src: img("Riverside", 1200, 900), alt: "Riverside Residences campaign" }}
  challenge="Launch a 42-apartment riverside development into a cautious market with an ambitious stage-one target."
  result="A full-funnel campaign — brand, website, and paid media — that filled the display suite from opening weekend."
  metric={{ value: "6", label: "weeks to sell out stage one" }}
  cta={{ label: "Read the full case study", href: "#" }}
  tone="base-200"
/>

Props

Name	Type	Required	Description
`client`	`string;`	—	Optional client / project name (eyebrow)
`image`	`{ src: string; alt: string };`	Yes	Feature image
`challenge`	`string;`	Yes	The challenge
`result`	`string;`	Yes	The result
`metric`	`{ value: string; label: string };`	Yes	Headline metric
`cta`	`{ label: string; href: string };`	—	Optional call to action
`tone`	`"base-100" \| "base-200" \| "base-300" \| "primary" \| "secondary" \| "neutral";`	—	Background tone — the Figma colour-variant axis

Example with all props

<CaseStudySpotlight
  client="Riverside Developments"
  image={{ src: "/case/riverside.jpg", alt: "Riverside campaign" }}
  challenge="Launch a 42-apartment development into a cautious market."
  result="A full-funnel campaign that filled the display suite from opening weekend."
  metric={{ value: "6", label: "weeks to sell out stage one" }}
  cta={{ label: "Read the case study", href: "#" }}
/>