LandingTestimonial - Nuxt UI Pro

Usage

The LandingTestimonial component will wrap your content in a Card.

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

quote

card

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

Rose Roberson

CEO at Google

<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
/>

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>
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

{}

{}

icon

string

undefined

quote

string

""

author

{ name: string; description?: string; avatar?: Avatar; } & Link

undefined

card

boolean

true

LandingFAQ

A pre-styled Accordion to display an FAQ on your landing pages.

PricingCard

A pre-built Card with all you need to display a pricing plan.