
## Feature Examples


### Structure
- description: This component displays testimonials in columns. Each testimonial can contain:<br/>
        &emsp;- `avatar` - use to display reviewer initials or picture. It’s recommended to use `<Avatar/>` in 60px size<br/>
        &emsp;- `text` - use to define testimonial text<br/>
        &emsp;- `authorName` - use to specify testimonial author.
- example: 
```jsx 
<TestimonialList
  testimonials={[
    {
      avatar: <Avatar name="Author Name" size="size60" />,
      text: 'This is a testimonial on your product or service',
      authorName: 'Author Name',
    },
    {
      avatar: <Avatar name="Author Name" size="size60" />,
      text: 'This is a testimonial on your product or service',
      authorName: 'Author Name',
    },
    {
      avatar: <Avatar name="Author Name" size="size60" />,
      text: 'This is a testimonial on your product or service',
      authorName: 'Author Name',
    },
  ]}
/>;
```

### Number of columns
- description: Control number of columns displayed in a row with `cols` prop.
        If items do not fit in a row it will wrap to another line.
- example: 
```jsx 
<TestimonialList
  cols={2}
  testimonials={[
    {
      avatar: <Avatar name="Author Name" size="size60" />,
      text: 'This is a testimonial on your product or service',
      authorName: 'Author Name',
    },
    {
      avatar: <Avatar name="Author Name" size="size60" />,
      text: 'This is a testimonial on your product or service',
      authorName: 'Author Name',
    },
    {
      avatar: <Avatar name="Author Name" size="size60" />,
      text: 'This is a testimonial on your product or service',
      authorName: 'Author Name',
    },{
      avatar: <Avatar name="Author Name" size="size60" />,
      text: 'This is a testimonial on your product or service',
      authorName: 'Author Name',
    },
  ]}
/>;
```




    


## Common Use Case Examples


### List without avatars
- description: All testimonials list props are optional.
        Create custom design by displaying only what's necessary in your use case, i.e., testimonial list without avatars.
- example: 
```jsx 
<TestimonialList
  cols={4}
  testimonials={[
    {
      text: 'I love it! This product is exactly what I needed.',
      authorName: 'Andrew Miller',
    },
    {
      text: 'Amazing! It helped me to solve my problems.',
      authorName: 'Carolyn Jones',
    },
    {
      text: 'A perfect tool for my everyday tasks. Saves me so much time!',
      authorName: 'Harry Pike',
    }
    ,
    {
      text: 'This tool changed the way I work.',
      authorName: 'Jessica  Flint',
    },
  ]}
/>;
```

### Marketing page
- description: Use testimonials list as a footer of `<MarketingPage/>` to promote 
        your product better by listing down user feedback on it.
- example: 
```jsx 
<Box backgroundColor="D80">
  <MarketingPageLayout
    content={
      <Box height="612px" verticalAlign="middle">
        <MarketingPageLayoutContent
          title="Reach the Right Shoppers on Facebook & Instagram"
          subtitle="Get set up and Wix’s AI will take care of the rest"
          content={
            <Text>
              <ul>
                <li>Show your ad to the people most likely to buy</li>
                <li>Test your ad non-stop to see what’s working </li>
                <li>Optimize your budget to get you the best results </li>
              </ul>
            </Text>
          }
          actions={
            <Box gap="12px">
              <Button>Start Now</Button>
              <Button priority="secondary" prefixIcon={<Icons.PlayFilled />}>
                Get to Know Wix's AI
              </Button>
            </Box>
          }
        />
      </Box>
    }
    image={<Image src="shoppers.png" />}
    footer={
      <TestimonialList
        testimonials={[
          {
            id: '0001',
            avatar: <Avatar name="Guy in glasses" size="size60" />,
            text: 'I love it! It helped me to increase the sales.',
            authorName: 'John Smith',
          },
          {
            id: '0002',
            avatar: <Avatar name="Person with a hat" size="size60" />,
            text: 'Amazing! It is simple to use, I had no struggle to setup.',
            authorName: 'Templeton Peck',
          },
          {
            id: '0003',
            avatar: <Avatar name="Smiling lady" size="size60" />,
            text: 'A perfect tool for creating ad campaigns that sell.',
            authorName: 'Bosco B.A.',
          },
        ]}
      />
    }
  />
</Box>;
```


