Nuxt UI Pro v1.0 is out with dashboard components! Discount ends 16 hours ago.

LandingTestimonial

A pre-built Card to display a testimonial in your landing pages.

Usage

The LandingTestimonial component will wrap your content in a Card.

Use the quote, icon and author props to customize the content of card.

Aliquip irure laboris deserunt in dolore in consectetur ex duis. Mollit ad esse ipsum irure id veniam irure culpa dolore labore.
Rose Roberson

Rose Roberson

CEO at Google

<template>
  <ULandingTestimonial
    icon="i-simple-icons-google"
    quote="Aliquip irure laboris deserunt in dolore in consectetur ex duis. Mollit ad esse ipsum irure id veniam irure culpa dolore labore."
    :author="{ name: 'Rose Roberson', description: 'CEO at Google', to: 'https://google.com', target: '_blank', avatar: { src: 'https://i.pravatar.cc/120?img=1', loading: 'lazy' } }"
    card
  />
</template>
You can disable its border and card style by setting the card prop to false.

This component can be put directly inside a PageColumns with its content fetched from @nuxt/content easily:

content/index.yml
testimonials:
  title: What people are saying
  description: Hear from our customers about their experience.
  items:
    - quote: Nostrud tempor sunt fugiat.
      author:
        name: Rose Roberson
        description: CEO at Company
        avatar:
          src: https://i.pravatar.cc/120?img=1
    - quote: Eiusmod dolor aute ut nulla pariatur officia consequat aute amet exercitation.
      author:
        name: Chace Rodgers
        description: CEO at Company
        avatar:
          src: https://i.pravatar.cc/120?img=7
    - quote: Id duis velit enim officia ad nisi incididunt magna ex dolor minim deserunt dolor.
      author:
        name: Cornelius Sheppard
        description: CEO at Company
        avatar:
          src: https://i.pravatar.cc/120?img=3
We're using .yml files as an example here but you can use any format supported by @nuxt/content like .md or .json.
pages/index.vue
<script setup lang="ts">
const { data: page } = await useAsyncData('index', () => queryContent('/').findOne())
</script>

<template>
  <ULandingSection :title="page.testimonials.title" :description="page.testimonials.description">
    <UPageColumns>
      <!-- Hack for Safari -->
      <div v-for="(testimonial, index) in page.testimonials.items" :key="index" class="break-inside-avoid">
        <ULandingTestimonial v-bind="testimonial" />
      </div>
    </UPageColumns>
  </ULandingSection>
</template>

Slots

icon
{}
quote
{}

Props

quoterequired
string
icon
string
undefined
ui
{}
{}
author
{ name: string; description?: string; avatar?: Avatar; } & NuxtLinkProps
undefined
card
boolean
true

Config

{
  body: {
    base: 'flex flex-col',
    padding: ''
  },
  wrapper: 'relative',
  quote: 'text-gray-600 dark:text-gray-300',
  icon: {
    wrapper: 'mb-6 flex',
    base: 'w-8 h-8 flex-shrink-0 text-gray-900 dark:text-white'
  },
  author: {
    wrapper: 'flex items-center gap-3 mt-6 relative',
    name: 'font-semibold text-gray-900 dark:text-white text-sm',
    description: 'text-gray-500 dark:text-gray-400 text-sm',
    avatar: {
      base: '',
      size: 'md'
    }
  }
}