Content Cards
Testimonial
Editorial testimonial card with serif blockquote and portrait image.
Content Cards
Four components covering the most common social-proof and people content patterns: products with color variants, team member profiles, aggregated review scores, and editorial testimonials.
Components
<XCardTestimonial />
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.
<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 | — | The testimonial quote text (required, rendered without surrounding quotes in markup — the template adds them) |
author | string | — | Person's name (required) |
role | string | — | Role or descriptor below the author name |
imageUrl | string | — | Portrait image URL (required) |
imageAlt | string | — | Alt text for the portrait |
AI Context
category: ContentCards
package: "@xenterprises/nuxt-x-cards"
components:
- XCardTestimonial
use-when: >
Use XCardTestimonial for full-width editorial customer story sections.
notes:
- XCardTestimonial applies filter-x-warm to portrait images automatically
- XCardTestimonial is best at full width or in a 1-column XCardGrid