Testimonial

Quoted customer endorsement.

“The onboarding flow alone saved our support team ten hours a week.”
Sam Whitfield
COO, Ridgeline

html

<figure class="testi">
  <blockquote class="testi__quote">&ldquo;The onboarding flow alone saved our support team ten hours a week.&rdquo;</blockquote>
  <figcaption class="testi__meta">
    <span class="testi__avatar" style="background:#D9C8F0;" aria-hidden="true">SW</span>
    <span><strong class="testi__name">Sam Whitfield</strong><br /><span class="testi__role">COO, Ridgeline</span></span>
  </figcaption>
</figure>
<style>
.testi { font: 16px/1.5 system-ui, sans-serif; color: #241430; max-width: 340px; margin: 0; padding: 22px; border-radius: 14px; background: #FAF7F2; border: 1px solid #24143022; }
.testi__quote { margin: 0 0 16px; font-size: 17px; font-weight: 500; }
.testi__meta { display: flex; align-items: center; gap: 10px; }
.testi__avatar { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; font-size: 12px; font-weight: 700; flex-shrink: 0; }
.testi__name { font-size: 14px; }
.testi__role { font-size: 13px; color: #241430aa; }
</style>

tailwind

<figure class="m-0 font-sans text-[#241430] max-w-[340px] p-5.5 rounded-2xl bg-[#FAF7F2] border border-[#24143022]">
  <blockquote class="m-0 mb-4 text-[17px] font-medium">&ldquo;The onboarding flow alone saved our support team ten hours a week.&rdquo;</blockquote>
  <figcaption class="flex items-center gap-2.5">
    <span class="inline-flex items-center justify-center w-[38px] h-[38px] rounded-full text-xs font-bold flex-shrink-0" style="background:#D9C8F0;" aria-hidden="true">SW</span>
    <span><strong class="text-sm">Sam Whitfield</strong><br /><span class="text-[13px] text-[#241430]/65">COO, Ridgeline</span></span>
  </figcaption>
</figure>

react

export function Testimonial({
  quote = "The onboarding flow alone saved our support team ten hours a week.",
  name = "Sam Whitfield",
  role = "COO, Ridgeline",
  accent = "#D9C8F0",
}) {
  return (
    <figure style={{ font: "16px/1.5 system-ui, sans-serif", color: "#241430", maxWidth: 340, margin: 0, padding: 22,
      borderRadius: 14, background: "#FAF7F2", border: "1px solid #24143022" }}>
      <blockquote style={{ margin: "0 0 16px", fontSize: 17, fontWeight: 500 }}>&ldquo;{quote}&rdquo;</blockquote>
      <figcaption style={{ display: "flex", alignItems: "center", gap: 10 }}>
        <span aria-hidden="true" style={{ display: "inline-flex", alignItems: "center", justifyContent: "center",
          width: 38, height: 38, borderRadius: "50%", fontSize: 12, fontWeight: 700, flexShrink: 0, background: accent }}>SW</span>
        <span><strong style={{ fontSize: 14 }}>{name}</strong><br /><span style={{ fontSize: 13, color: "#241430aa" }}>{role}</span></span>
      </figcaption>
    </figure>
  );
}