Content Cards
Product
Product showcase card with color swatch switcher and image swap.
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 display 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 |
AI Context
category: ContentCards
package: "@xenterprises/nuxt-x-cards"
components:
- XCardProduct
use-when: >
Use XCardProduct for e-commerce or product showcase sections with color variants.
notes:
- XCardProduct image swapping requires imageUrl on each color object
- aspectRatio falls back to useXCards() productAspectRatio global default