Library · Social Proof

Testimonial Feed / Card Bubbles

Centred heading over white review cards — quote mark, accent star rating, body copy, small-caps author. Figma's carousel dots replaced by CSS scroll-snap on small screens (no JS). Tone via the shared contract.

Figma: Testimonial Feed - Card bubbles ↗ View Elementor template in 8020 ↗

Live preview — edit theme bottom-right

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

const testimonials = [
  {
    quote:
      "From the first appraisal to settlement day the communication was outstanding. Our home sold above expectations within three weeks.",
    author: "Seller of house in XYZ",
  },
  {
    quote:
      "Genuine, straightforward advice and a marketing campaign that made our place shine. We couldn't have asked for a smoother sale.",
    author: "Seller of townhouse in XYZ",
  },
  {
    quote:
      "As first-home buyers we had a hundred questions — every one was answered patiently. We always knew exactly where we stood.",
    author: "Buyer of apartment in XYZ",
  },
];
---
<TestimonialCardBubbles
  title="What our clients say"
  testimonials={testimonials}
  tone="base-200"
/>

Props

Name	Type	Required	Description
`title`	`string`	Yes	Section heading
`testimonials`	`Testimonial[]`	Yes	Review cards (design shows 3 per row)
`level`	`'h2' \| 'h3'`	—	Semantic heading level (default: 'h2')
`tone`	`"base-100" \| "base-200" \| "base-300" \| "primary" \| "secondary" \| "neutral"`	—	Background tone — the Figma colour-variant axis

Example with all props

<TestimonialCardBubbles
  title="What our clients say"
  testimonials={[
    { quote: "Sold above expectations within three weeks.", author: "Seller of house in XYZ", rating: 5 },
  ]}
  tone="base-200"
/>