Testimonial Card

Testimonial quote card with a circular avatar, name + subtitle, and quote body. Used by the homepage Testimonials grid and the CaseStudyTestimonials section.

With photo

Gabriel Hidalgo

UX/UI Designer, Gabriel Hidalgo Design

Working on this project taught me that small, considered details compound into something that actually feels like a brand.

Initial fallback (no photo)

Alice Nguyen

Product Manager, Acme Inc.

The team shipped faster than we thought possible, and the end result raised the bar for the whole org.

Two-up grid

Mark Dawes

CEO, RewardPay

Gabriel is really easy to work with and his output was excellent.

Priya Singh

Design Lead, Northwind

Exactly the kind of senior craft we wanted — pragmatic, fast, and visually tight.

Props

Prop	Type	Default	Description
`name`*	`string`	-	The testimonial author. Rendered as the primary label.
`subtitle`*	`string`	-	Sub-label below the name — usually company, or "Role, Company".
`quote`*	`string`	-	Body text of the testimonial.
`image`	`SanityImage \| LocalImage`	-	Photo of the author. Optional — falls back to initial letter.
`localImagePath`	`string`	-	Public image path. Takes precedence over `image`.
`index`	`number`	`0`	Position in the list — drives the staggered fade-in delay (index * 0.08s).
`className`	`string`	-	Additional classes merged onto the outer card.

Import

tsx

import { TestimonialCard } from '@/components/ui/TestimonialCard'

Usage

tsx

<TestimonialCard
  name={testimonial.name}
  subtitle={`${testimonial.role}, ${testimonial.company}`}
  quote={testimonial.quote}
  image={testimonial.image}
  localImagePath={testimonial.localImagePath}
  index={index}
/>