Testimonial Marquee Card

Fixed-width testimonial card used by the drifting marquee rows in the Testimonials section. Unlike TestimonialCard it has no entrance animation and caps its quote at 180 characters, because the marquee duplicates its cards to make the loop seamless and every card in a row must be a similar size.

With photo

Mark Dawes

CEO, RewardPay

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

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.

Long quote (truncated at 180 characters)

Alan Ung

Software Engineer, CommBank

One of the most commendable aspects of your work on the CBA project has been your proactive communication. Your highly positive work ethic is evident in the way you promptly…

Row of cards

Yashu Singh

Product Owner, CommBank

You come across as someone with great knowledge of your topic and bring a lot of experience to make things better.

Andrew Barton

Founder, Whistle

We have and continue to be happy with his flexibility in meeting our timeframes, collaboration and excellent result!

Props

Prop	Type	Default	Description
`name`*	`string`	-	The testimonial author. Rendered as the primary label.
`subtitle`*	`string`	-	Sub-label below the name — usually "Role, Company".
`quote`*	`string`	-	Body text of the testimonial. Truncated on a word boundary at 180 characters so cards stay a similar size; the full review is shown in the FeaturedTestimonial spotlight.
`image`	`SanityImage \| LocalImage`	-	Photo of the author. Optional — falls back to initial letter.
`localImagePath`	`string`	-	Public image path. Takes precedence over `image`.
`className`	`string`	-	Additional classes merged onto the outer card.

Import

tsx

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

Usage

tsx

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