Component library

Narrative

• <Testimonial>

  testimonialTestimonialNarrative

  Customer or stakeholder quote card with avatar, name, role, and company.

  When to use: Always inside `<TestimonialGrid>`. Use for social proof in case studies and workshop reports. One centred card or three across.

  Often with: TestimonialGridQuotePersonCard

  Preview

  “

  The first automation went live in two weeks. Finance finally trusts the numbers.

  ”

  Prop	Type	Notes
  children	ReactNode	Required. Quote body (no surrounding quotation marks).
  name	string	Required. Speaker name.Example: Maria Fernandes
  role	string	Optional. Job title.Example: Head of Finance
  company	string	Optional. Organisation.Example: Acme Corp
  avatarUrl	string	Optional. Optional headshot URL.
  initials	string	Optional. Avatar fallback.Example: MF

  Examples

  <Testimonial name="Maria Fernandes" role="Head of Finance" company="Acme Corp" initials="MF">
    The first automation went live in two weeks. Finance finally trusts the numbers.
  </Testimonial>

• <TestimonialGrid>

  testimonialTestimonialNarrative

  Grid of one or three Testimonial cards with optional heading.

  When to use: Social proof section in document reports. One testimonial for a hero quote; three for a balanced row.

  Often with: TestimonialQuote

  Preview

  What teams say after Wave 1

  “

  The first automation went live in two weeks.

  ”

  Prop	Type	Notes
  title	string	Optional. Section heading above the grid.
  description	string	Optional. Subtitle or context line.
  children	ReactNode	Required. One or three <Testimonial> elements.

  Examples

  <TestimonialGrid title="What teams say after Wave 1">
    <Testimonial name="Maria Fernandes" role="Head of Finance" company="Acme Corp" initials="MF">
      The first automation went live in two weeks.
    </Testimonial>
  </TestimonialGrid>