Shipixen Logo

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.

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

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.

With Background Glow

With Read More Wrapper

API Reference

Prop NameProp TypeRequiredDefault
title string ǀ React.ReactNodeNo-
titleComponent React.ReactNodeNo-
description string ǀ React.ReactNodeNo-
descriptionComponent React.ReactNodeNo-
testimonialItems TestimonialItem[]Yes-
withBackground booleanNofalse
variant 'primary' ǀ 'secondary'No'primary'
withBackgroundGlow booleanNofalse
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.