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. The featured and carousel layouts auto-advance by default.
Components
<XMarkSocialProofTestimonials />
<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 (default behavior):
<XMarkSocialProofTestimonials
layout="featured"
:auto-play="true"
:interval="5000"
:testimonials="testimonials"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
testimonials | array | 3 example testimonials | Testimonial objects [{ name, title?, company?, quote, rating?, avatar?, logo? }]. |
layout | string | 'featured' | Display mode: 'featured', 'grid', 'carousel'. |
hasStars | boolean | true | Show star rating icons. |
autoPlay | boolean | true | Auto-advance the featured / carousel layout on a timer. |
interval | 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 (auto-advances by default), and carousel for a
scrolling strip of testimonials.
typical-page-section: Between features and pricing sections on a landing page.