# Testimonials

> Testimonials components for displaying testimonials.

Web: https://vuemail.dev/components/testimonials

Paste any snippet into an email built with Vuemail. The snippets are single file components that use the primitives from `@vuemaildev/vuemail`.

## Testimonial simple centered

Source: https://github.com/psycarlo/vuemail/tree/main/apps/web/components/testimonial-simple-centered

### Tailwind

```vue
<script setup lang="ts">
import { Column, Img, Row, Section } from '@vuemaildev/vuemail';
</script>

<template>
  <Section class="text-center text-[14px] leading-[20px] text-gray-600">
    <p class="m-0 text-[16px] leading-[24px] font-light text-gray-800">
      Design is not just what it looks like and feels like. Design is how it
      works. The people who are crazy enough to think they can change the world
      are the ones who do. Innovation distinguishes between a leader and a
      follower.
    </p>
    <Row :width="undefined" align="center" class="mt-8">
      <Column
        valign="middle"
        width="32"
        height="32"
        class="h-[32px] w-[32px] rounded-full overflow-hidden bg-gray-600"
      >
        <Img
          src="/static/steve-jobs.jpg"
          :width="32"
          :height="32"
          alt="Steve Jobs"
          class="h-[32px] w-[32px] object-cover"
        />
      </Column>
      <Column valign="middle">
        <p
          class="m-0 ml-[12px] text-[14px] leading-[20px] font-semibold text-gray-900 mr-[8px]"
        >
          Steve Jobs
        </p>
      </Column>
      <Column valign="middle">
        <span class="text-[14px] leading-[20px] mr-[8px]">•</span>
      </Column>
      <Column valign="middle">
        <p class="m-0 text-[14px] leading-[20px]">Co-founder of Apple</p>
      </Column>
    </Row>
  </Section>
</template>
```

### Inline styles

```vue
<script setup lang="ts">
import { Column, Img, Row, Section } from '@vuemaildev/vuemail';
</script>

<template>
  <Section
    :style="{
      textAlign: 'center',
      fontSize: '14px',
      lineHeight: '20px',
      color: '#4b5563',
    }"
  >
    <p
      :style="{
        margin: '0',
        fontSize: '16px',
        lineHeight: '24px',
        fontWeight: 300,
        color: '#1f2937',
      }"
    >
      Design is not just what it looks like and feels like. Design is how it
      works. The people who are crazy enough to think they can change the world
      are the ones who do. Innovation distinguishes between a leader and a
      follower.
    </p>
    <Row :style="{ marginTop: '32px' }" :width="undefined" align="center">
      <Column valign="middle">
        <div
          :style="{
            height: '32px',
            width: '32px',
            borderRadius: '9999px',
            overflow: 'hidden',
            backgroundColor: '#4b5563',
          }"
        >
          <Img
            src="/static/steve-jobs.jpg"
            :width="32"
            :height="32"
            alt="Steve Jobs"
            :style="{ height: '100%', width: '100%', objectFit: 'cover' }"
          />
        </div>
      </Column>
      <Column valign="middle">
        <p
          :style="{
            margin: '0',
            marginLeft: '12px',
            fontSize: '14px',
            lineHeight: '20px',
            fontWeight: 600,
            color: '#111827',
            marginRight: '8px',
          }"
        >
          Steve Jobs
        </p>
      </Column>
      <Column valign="middle">
        <span
          :style="{ fontSize: '14px', lineHeight: '20px', marginRight: '8px' }"
        >•</span>
      </Column>
      <Column valign="middle">
        <p :style="{ margin: '0', fontSize: '14px', lineHeight: '20px' }">
          Co-founder of Apple
        </p>
      </Column>
    </Row>
  </Section>
</template>
```

## Testimonial with large avatar

Source: https://github.com/psycarlo/vuemail/tree/main/apps/web/components/testimonial-with-large-avatar

### Tailwind

```vue
<script setup lang="ts">
import { Img } from '@vuemaildev/vuemail';
import ResponsiveColumn from '../_components/responsive-column.vue';
import ResponsiveRow from '../_components/responsive-row.vue';
</script>

<template>
  <ResponsiveRow class="mx-[12px] my-[16px] text-[14px] text-gray-600">
    <ResponsiveColumn
      class="mt-0 mr-[24px] mb-[24px] ml-0 w-64 overflow-hidden rounded-3xl"
    >
      <Img
        src="/static/steve-jobs.jpg"
        :width="320"
        :height="320"
        alt="Steve Jobs"
        class="h-[320px] w-full object-cover object-center"
      />
    </ResponsiveColumn>
    <ResponsiveColumn class="pr-[24px]">
      <p
        class="mx-0 my-0 mb-[24px] text-left text-[16px] leading-[1.625] font-light text-gray-700"
      >
        Design is not just what it looks like and feels like. Design is how it
        works. The people who are crazy enough to think they can change the
        world are the ones who do. Innovation distinguishes between a leader and
        a follower.
      </p>
      <p
        class="mx-0 mt-0 mb-[4px] text-left text-[16px] font-semibold text-gray-800"
      >
        Steve Jobs
      </p>
      <p class="m-0 text-left text-[14px] text-gray-600">Co-founder of Apple</p>
    </ResponsiveColumn>
  </ResponsiveRow>
</template>
```

### Inline styles

```vue
<script setup lang="ts">
import { Img } from '@vuemaildev/vuemail';
import ResponsiveColumn from '../_components/responsive-column.vue';
import ResponsiveRow from '../_components/responsive-row.vue';
</script>

<template>
  <ResponsiveRow
    :style="{
      marginLeft: '12px',
      marginRight: '12px',
      marginTop: '16px',
      marginBottom: '16px',
      fontSize: '14px',
      color: '#4b5563',
    }"
  >
    <ResponsiveColumn
      :style="{
        marginTop: '0',
        marginRight: '24px',
        marginBottom: '24px',
        marginLeft: '0',
        width: '256px',
        overflow: 'hidden',
        borderRadius: '24px',
      }"
    >
      <Img
        src="/static/steve-jobs.jpg"
        :width="320"
        :height="320"
        alt="Steve Jobs"
        :style="{
          height: '320px',
          width: '100%',
          objectFit: 'cover',
          objectPosition: 'center',
        }"
      />
    </ResponsiveColumn>
    <ResponsiveColumn :style="{ paddingRight: '24px' }">
      <p
        :style="{
          marginLeft: '0',
          marginRight: '0',
          marginTop: '0',
          marginBottom: '24px',
          textAlign: 'left',
          fontSize: '16px',
          lineHeight: '1.625',
          fontWeight: '300',
          color: '#374151',
        }"
      >
        Design is not just what it looks like and feels like. Design is how it
        works. The people who are crazy enough to think they can change the
        world are the ones who do. Innovation distinguishes between a leader and
        a follower.
      </p>
      <p
        :style="{
          marginLeft: '0',
          marginRight: '0',
          marginTop: '0',
          marginBottom: '4px',
          textAlign: 'left',
          fontSize: '16px',
          fontWeight: '600',
          color: '#1f2937',
        }"
      >
        Steve Jobs
      </p>
      <p
        :style="{
          margin: '0',
          textAlign: 'left',
          fontSize: '14px',
          color: '#4b5563',
        }"
      >
        Co-founder of Apple
      </p>
    </ResponsiveColumn>
  </ResponsiveRow>
</template>
```