nuxt-x-cards
Review Card
Multi-source review card supporting Google, Yelp, Trustpilot, App Store, and generic.
Review Card
The XCardReview component renders a compact review card for aggregated social proof. Displays a platform badge (Google, Yelp, Trustpilot, App Store, or generic), a 5-star rating row, the review text (line-clamped to 4 lines), and a reviewer avatar or initial fallback.
Components
<XCardReview />
<XCardReview
review-text="I've tried every sleep tracker on the market. Nothing comes close to the accuracy and the battery life of this ring."
reviewer-name="Marcus T."
reviewer-avatar="/images/reviewers/marcus.jpg"
:rating="5"
source="appstore"
date="Jan 2025"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
reviewText | string | required | The review body |
reviewerName | string | required | Reviewer's display name |
rating | 1 | 2 | 3 | 4 | 5 | required | Star rating |
reviewerAvatar | string | — | Avatar image URL; falls back to initial letter circle if omitted |
source | 'google' | 'yelp' | 'trustpilot' | 'appstore' | 'generic' | 'generic' | Review platform — controls the badge icon and label |
date | string | — | Display date string (e.g. "Jan 2025") |
aspectRatio | 'auto' | 'square' | 'landscape' | 'portrait' | 'cinematic' | 'tall' | 'auto' | Card aspect ratio; useful for equal-height grids |
loading | 'eager' | 'lazy' | 'lazy' | Native <img> loading hint for the reviewer avatar. |
AI Context
component: XCardReview
package: "@xenterprises/nuxt-x-cards"
category: ContentCards
use-when: >
Use XCardReview in social proof sections — pair with XCardGrid for uniform
layout. Supports Google, Yelp, Trustpilot, App Store, and generic sources.
notes:
- avatar falls back to an initial-letter circle if reviewerAvatar is omitted