Usage
The LandingTestimonial component will wrap your content in a Card.
Use the quote, icon and author props to customize the content of card.
<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
undefinedui
{}
{}author
{ name: string; description?: string; avatar?: Avatar; } & NuxtLinkProps
undefinedcard
boolean
trueConfig
{
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'
}
}
}