nuxt-x-affiliate
Testimonials
Reader testimonials as a card grid, a stacked list, or a featured single-quote carousel with autoplay.
Testimonials
The XAFTestimonials component renders reader testimonials — useful for the home page,
About page, or a product detail "What people are saying" section.
Three layouts: grid and list render every testimonial as a card; featured shows
one large quote at a time with arrows, dots, crossfade, and optional autoplay.
Components
<XAFTestimonials />
<XAFTestimonials
title="What readers are saying"
layout="grid"
:items="[
{ text: 'Best mechanical keyboard review site on the internet.', source: { name: 'Alex P.', role: 'Reader since 2024' }, rating: 5, date: '2026-02-15' },
{ text: 'I trust their picks over anyone else.', source: { name: 'Sam T.', role: 'Subscriber' }, rating: 5 },
{ text: 'The methodology pages are gold.', source: { name: 'Jordan L.', role: 'Industry pro' } },
]"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | Testimonial[] | required | Each testimonial: { text, source: QuoteSource, rating?, date? }. |
title | string | "What Readers Are Saying" | Section heading. |
layout | 'grid' | 'list' | 'featured' | 'grid' | Card grid, stacked list, or single-quote carousel. |
autoplay | boolean | true | Rotate the featured carousel automatically. Ignored by the card layouts. |
interval | number | 5000 | Autoplay interval in ms. |
Featured carousel
<XAFTestimonials
layout="featured"
title="What readers are saying"
:items="testimonials"
:interval="6000"
/>
Autoplay pauses on hover and on keyboard focus, and never starts at all under
prefers-reduced-motion — a self-rotating carousel is exactly the non-essential motion
that setting exists to suppress. The rotating region is aria-live="polite", so a
screen reader is told the quote changed rather than having content swapped out silently.
Testimonial shape
interface Testimonial {
text: string
source: QuoteSource // { name, role?, href? }
rating?: number // 0-5, rendered via <XAFStarRating>
date?: string // ISO
avatar?: string // author photo; falls back to a monogram
company?: string // company the author is quoted on behalf of
logo?: string // company logo, shown beside the attribution in `featured`
}
AI Context
component: XAFTestimonials
package: "@xenterprises/nuxt-x-affiliate"
use-when: Reader testimonials as a card grid, stacked list, or featured single-quote carousel.