nuxt-x-cards
Testimonial Card
Editorial testimonial card with serif blockquote and portrait image.
Testimonial Card
The XCardTestimonial component renders an editorial testimonial card in the Oura serif pattern. A split two-column layout with a warm-filtered portrait on the left and a large serif italic blockquote on the right. Best used as a full-width card or in a 1-column grid.
Components
<XCardTestimonial />
<XCardTestimonial
quote="I stopped relying on how I felt when I woke up. Now I trust my data."
author="Priya Nair"
role="Ultra-marathon runner"
image-url="/images/testimonials/priya.jpg"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
quote | string | required | The testimonial quote text (rendered without surrounding quotes in markup — the template adds them) |
author | string | required | Person's name |
imageUrl | string | required | Portrait image URL |
role | string | — | Role or descriptor below the author name |
imageAlt | string | — | Alt text for the portrait |
filter | 'cinematic' | 'moody' | 'golden' | 'cool' | 'dramatic' | 'warm' | 'clean' | 'product' | 'none' | 'warm' | CSS filter applied to the portrait image. |
loading | 'eager' | 'lazy' | 'lazy' | Native <img> loading hint for the portrait. |
AI Context
component: XCardTestimonial
package: "@xenterprises/nuxt-x-cards"
category: ContentCards
use-when: >
Use XCardTestimonial for full-width editorial customer story sections.
notes:
- Applies filter-x-warm to portrait images automatically
- Best at full width or in a 1-column XCardGrid