Landing Page Testimonial List Component
- Updated on
Use this component to display a list of testimonials. Each testimonial has text, a name, and a picture of the person.
Testimonials are a great way to show that other people have used your product and are happy with it. Consider adding it high up on your landing page.
Shorter testimonials can be made smaller by setting the size prop to half or third. The default size is full.
Don't take it from us
See what other people have to say.
βThis is the best thing since sliced bread. I cannot believe I did not think of it myself.β
βAfter using this, I cannot imagine going back to the old way of doing things.β
βPerfect for my use caseβ
βExcellent product!β
βCan easily recommend!β
Usage
import { LandingTestimonialListSection } from '@/components/landing/testimonial/LandingTestimonialList';
const testimonialItems = [
{
name: 'Parl Coppa',
text: 'This is the best thing since sliced bread. I cannot believe I did not think of it myself.',
handle: '@coppalipse',
imageSrc: 'https://picsum.photos/100/100.webp?random=1',
size: 'half',
},
{
name: 'Mathew',
text: 'After using this, I cannot imagine going back to the old way of doing things.',
handle: '@heymatt_oo',
imageSrc: 'https://picsum.photos/100/100.webp?random=2',
size: 'half',
},
{
name: 'Joshua',
text: 'Perfect for my use case',
handle: '@joshua',
imageSrc: 'https://picsum.photos/100/100.webp?random=3',
size: 'third',
},
{
name: 'Mandy',
text: 'Excellent product!',
handle: '@mandy',
imageSrc: 'https://picsum.photos/100/100.webp?random=4',
size: 'third',
},
{
name: 'Alex',
text: 'Can easily recommend!',
handle: '@alex',
imageSrc: 'https://picsum.photos/100/100.webp?random=5',
size: 'third',
},
];
<LandingTestimonialListSection
title="Don't take it from us"
description="See what other people have to say."
testimonialItems={testimonialItems}
/>
Examples
Background, links and features
This component supports different background colors.
Here we set variant to secondary.
Testimonials can also be linked + be featured and you can mix and match to send the desired message.
Don't take it from us
See what other people have to say.
βThis is the best thing since sliced bread. I cannot believe I did not think of it myself.β
βAfter using this, I cannot imagine going back to the old way of doing things.β
βPerfect for my use caseβ
With Background Glow
Don't take it from us
See what other people have to say.
βThis is the best thing since sliced bread. I cannot believe I did not think of it myself.β
βAfter using this, I cannot imagine going back to the old way of doing things.β
βPerfect for my use caseβ
With Read More Wrapper
Don't take it from us
See what other people have to say.
βThis is the best thing since sliced bread. I cannot believe I did not think of it myself.β
βAfter using this, I cannot imagine going back to the old way of doing things.β
βPerfect for my use caseβ
API Reference
Prop NameProp TypeRequiredDefault titlestring Η React.ReactNode No- titleComponent React.ReactNode No- description string Η React.ReactNode No- descriptionComponent React.ReactNode No- testimonialItems TestimonialItem[] Yes- withBackground boolean No false variant 'primary' Η 'secondary' No 'primary' withBackgroundGlow boolean No false backgroundGlowVariant 'primary' Η 'secondary' No 'primary'export interface TestimonialItem {
className?: string;
url?: string;
text: string;
imageSrc: string;
name: string;
handle: string;
featured?: boolean;
verified?: boolean;
size?: 'full' | 'half' | 'third'; // NB: Only applies to testimonials in a list, not grid.
}
More Examples
For more even more examples, see our Landing Page Component Examples page or see complete landing page examples by Exploring Our Landing Page Templates.