nuxt-x-marketing
SocialProofTestimonials
Testimonial display in featured carousel, grid, or horizontal carousel layout with star ratings and attribution.
SocialProofTestimonials
Three layout modes are available: featured (single large quote with previous/next arrows), grid (card masonry), and carousel (horizontally scrolling strip). All modes support star ratings.
Components
<XMarkSocialProofTestimonials />
Three layout modes are available: featured (single large quote with previous/next arrows), grid (card masonry), and carousel (horizontally scrolling strip). All modes support star ratings.
<XMarkSocialProofTestimonials
layout="grid"
:has-stars="true"
:testimonials="[
{
name: 'Sarah K.',
title: 'CTO',
company: 'Acme Corp',
quote: 'This tool cut our deployment time in half. Absolutely indispensable.',
rating: 5,
avatar: '/avatars/sarah.jpg',
},
{
name: 'James T.',
title: 'Lead Developer',
company: 'StartupXYZ',
quote: 'The DX is miles ahead of anything else we tried.',
rating: 5,
},
]"
/>
Featured carousel with auto-advance:
<XMarkSocialProofTestimonials
layout="featured"
:auto-play="true"
:auto-play-interval="5000"
:testimonials="testimonials"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
testimonials | Array | [] | Testimonial objects [{ name, title?, company?, quote, rating?, avatar? }] |
layout | String | 'featured' | Display mode: 'featured', 'grid', 'carousel' |
hasStars | Boolean | true | Show star rating icons |
autoPlay | Boolean | false | Auto-advance featured/carousel layout |
autoPlayInterval | Number | 5000 | Milliseconds between auto-advances |
AI Context
category: SocialProof
package: "@xenterprises/nuxt-x-marketing"
components:
- XMarkSocialProofTestimonials
use-when: >
Showcasing customer quotes to build trust on landing pages. Use grid for
a compact multi-testimonial section, featured for a single highlighted
quote with navigation, and carousel for a scrolling strip of testimonials.
typical-page-section: Between features and pricing sections on a landing page.