Content Cards
Review
Multi-source review card supporting Google, Yelp, Trustpilot, App Store, and generic.
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
<XCardReview />
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. The aspectRatio prop is useful when using reviews in a uniform-height grid.
<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 | — | The review body (required) |
reviewerName | string | — | Reviewer's display name (required) |
reviewerAvatar | string | — | Avatar image URL; falls back to initial letter circle if omitted |
rating | 1 | 2 | 3 | 4 | 5 | — | Star rating (required) |
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' | '4:3' | '3:4' | '16:9' | '9:16' | 'auto' | Card aspect ratio; useful for equal-height grids |
AI Context
category: ContentCards
package: "@xenterprises/nuxt-x-cards"
components:
- XCardReview
use-when: >
Use XCardReview in social proof sections — pair with XCardGrid for uniform
layout. Supports Google, Yelp, Trustpilot, App Store, and generic sources.
notes:
- XCardReview avatar falls back to an initial-letter circle if reviewerAvatar is omitted