Page UI logo

Landing Page Testimonial Grid Component

Use this component to display a grid of testimonials.
This component accepts a title, description and a list of testimonials. They will be placed in a column layout on small screens, then a 2-column layout and finally a 3-column layout on large screens.
Each testimonial can be featured or not. The featured testimonial will stand out with bigger & bolder text.

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.

Usage

import { LandingTestimonialGrid } from '@/components/landing/testimonial/LandingTestimonialGrid';
const testimonialItems = [
  {
    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',
  },
  {
    name: 'Joshua',
    text: 'Perfect for my use case',
    handle: '@joshua',
    imageSrc: 'https://picsum.photos/100/100.webp?random=3',
  },
  {
    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',
    featured: true, // Feature this testimonial
  },
  {
    name: 'Mandy',
    text: 'Excellent product!',
    handle: '@mandy',
    imageSrc: 'https://picsum.photos/100/100.webp?random=4',
  },
  {
    name: 'Alex',
    text: 'Can easily recommend!',
    handle: '@alex',
    imageSrc: 'https://picsum.photos/100/100.webp?random=5',
  },
  {
    name: 'Sam',
    text: 'I am very happy with the results.',
    handle: '@sama',
    imageSrc: 'https://picsum.photos/100/100.webp?random=6',
  },
];
<LandingTestimonialGrid
  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.

Background Glow

Read more wrapper

If your testimonials exceed 2 rows, you can add a "Read more" wrapper to hide the rest of the content initially.
This is usually a good idea to keep the page clean and focused.

API Reference

Prop NameProp TypeRequiredDefault
title string ǀ React.ReactNodeNo-
description string ǀ React.ReactNodeNo-
testimonialItems Array<TestimonialItem>Yes-
featuredTestimonial TestimonialItemNo-
withBackground booleanNo-
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.