Content Cards
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
<XCardProduct />
A product showcase card in the Oura style — warm neutral background, top-mounted image, color swatch row, price, and a ghost CTA. When colors are provided, clicking a swatch updates the displayed image if that color entry has an imageUrl. The aspect ratio of the image container falls back to the global useXCards() productAspectRatio default.
<XCardProduct
title="Oura Ring Gen 4"
description="The most accurate health sensor in the most comfortable form factor."
price="$349"
image-url="/images/ring-silver.jpg"
badge="New"
aspect-ratio="square"
:colors="[
{ name: 'Silver', hex: '#C0C0C0', imageUrl: '/images/ring-silver.jpg' },
{ name: 'Black', hex: '#1A1A1A', imageUrl: '/images/ring-black.jpg' },
{ name: 'Gold', hex: '#B8963E', imageUrl: '/images/ring-gold.jpg' }
]"
:cta="{ label: 'Shop', to: '/shop/ring' }"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | — | Product name (required) |
description | string | — | Short product description, line-clamped to 2 lines |
price | string | — | Price string (e.g. "$349") |
imageUrl | string | — | Default product image URL (required) |
imageAlt | string | — | Alt text for the product image |
badge | string | — | Optional badge label (e.g. "New", "Best Seller") |
colors | Array<{ name: string; hex: string; imageUrl?: string }> | — | Color swatches; clicking swaps the image when imageUrl is set on the color |
cta | { label: string; to: string } | — | Ghost CTA button with arrow icon |
aspectRatio | 'square' | 'product' | 'portrait' | 'landscape' | global default | Aspect ratio of the image container |
<XCardTeam />
A team member profile card with a warm-filtered portrait photo, name, role, optional bio, and social icon links. The portrait renders at aspect-square and uses the filter-x-warm preset automatically. Social links use ghost icon buttons.
<XCardTeam
name="Dr. Sarah Chen"
role="Chief Science Officer"
bio="Former Stanford sleep lab researcher with 15 years studying circadian biology."
image-url="/images/team/sarah.jpg"
:socials="[
{ icon: 'i-simple-icons-linkedin', to: 'https://linkedin.com/in/sarahchen', label: 'LinkedIn' },
{ icon: 'i-simple-icons-x', to: 'https://x.com/sarahchen', label: 'X' }
]"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
name | string | — | Person's full name (required) |
role | string | — | Job title or role (required) |
bio | string | — | Short biography, line-clamped to 2 lines |
imageUrl | string | — | Portrait photo URL (required) |
imageAlt | string | — | Alt text for the portrait |
socials | Array<{ icon: string; to: string; label?: string }> | — | Social link buttons; icon is a UIcon name, label sets aria-label |
<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 |
<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
package: "nuxt-x-cards"
prefix: XCard
components:
- XCardProduct
- XCardTeam
- XCardReview
- XCardTestimonial
use-when: >
Use XCardProduct for e-commerce or product showcase sections with color
variants. Use XCardTeam on about/team pages. Use XCardReview in social proof
sections — pair with XCardGrid for uniform layout. Use XCardTestimonial for
full-width editorial customer story sections.
notes:
- XCardTeam and XCardTestimonial apply filter-x-warm to portrait images automatically
- XCardProduct image swapping requires imageUrl on each color object
- XCardReview avatar falls back to an initial-letter circle if reviewerAvatar is omitted
- XCardTestimonial is best at full width or in a 1-column XCardGrid