Testimonial Card
Testimonial card with rating, block quote, and author's informations.
4.5
Working with them was a game-changer for our project. Their expertise and professionalism exceeded our expectations.
LM
Lisa M.
UX DesignerInstallation
Usage
<CardTestimonial
testimonialQuote={TESTIMONIAL.quote}
testimonialRating={TESTIMONIAL.rating}
testimonialAuthor={{
authorName: TESTIMONIAL.name,
avatarUrl: TESTIMONIAL.avatarUrl,
description: TESTIMONIAL.profession,
}}
role="article"
aria-labelledby={`card-${TESTIMONIAL.id}-title`}
aria-describedby={`card-${TESTIMONIAL.id}-content`}
className="h-[450px] w-[350px] shadow"
>
<TestimonialRating className="text-primary" />
<div className="relative text-center mx-auto w-4/5 text-lg">
<TestimonialQuote>{TESTIMONIAL.quote}</TestimonialQuote>
</div>
<TestimonialAuthor className="flex items-center gap-4" />
</CardTestimonial>Examples
5
Working with them was a game-changer for our project. Their expertise and professionalism exceeded our expectations.
LM
Lisa M.
UX DesignerProps
CardTestimonial
| Prop | Type | Default |
|---|---|---|
testimonialAuthor | {authorName: string;avatarUrl?: string;description?: string;} | - |
testimonialQuote | string | - |
testimonialRating? | number | - |