nuxt-x-cards
Feature Card
Feature card supporting icon, image, and stat display layouts with four visual variants.
Feature Card
The XCardFeature component adapts to three content layouts — icon badge, full-bleed image, or large stat figure — all driven by which props are provided. Only one of icon or imageUrl renders at a time. Four visual variants control the card surface.
Components
<XCardFeature />
<!-- Icon layout -->
<XCardFeature
title="Sleep Intelligence"
description="Understand your sleep stages, timing, and restoration score every morning."
icon="i-lucide-moon"
variant="elevated"
/>
<!-- Stat layout -->
<XCardFeature
title="Recovery Score"
description="A daily readiness number built from HRV, resting heart rate, and sleep data."
:stat="{ value: '94', label: 'Readiness today' }"
variant="default"
/>
<!-- Image layout -->
<XCardFeature
title="Activity Tracking"
description="Automatic workout detection across 40+ activity types."
image-url="/images/activity.jpg"
variant="bordered"
/>
<!-- Glass variant (over image backgrounds) -->
<XCardFeature
title="Continuous Monitoring"
description="24/7 heart rate and blood oxygen sensing."
icon="i-lucide-heart-pulse"
variant="glass"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | required | Card headline |
description | string | — | Supporting body text |
icon | string | — | Icon name (e.g. i-lucide-moon). Suppressed when imageUrl is present |
imageUrl | string | — | Full-bleed image URL. Renders above the text content |
imageAlt | string | — | Alt text for the feature image |
stat | { value: string; label: string } | — | Large stat figure with a smaller label below |
variant | 'default' | 'elevated' | 'bordered' | 'glass' | 'default' | Card surface style |
filter | 'cinematic' | 'moody' | 'golden' | 'cool' | 'dramatic' | 'warm' | 'clean' | 'product' | 'none' | 'none' | CSS filter applied to the feature image |
loading | 'eager' | 'lazy' | 'lazy' | Native <img> loading hint for the feature image. |
Variant reference:
| Variant | Surface |
|---|---|
default | Warm neutral background |
elevated | Warm neutral background with drop shadow |
bordered | Transparent with 1px border |
glass | Frosted glass — bg-white/15 backdrop-blur-xl with white border |
AI Context
component: XCardFeature
package: "@xenterprises/nuxt-x-cards"
category: FeatureCards
use-when: >
Use XCardFeature inside XCardGrid for features, benefits, or stats sections
on marketing and product pages.
notes:
- icon is hidden when imageUrl is provided
- glass variant is designed for use over dark or image backgrounds
- stat.value renders at text-4xl / text-5xl; keep values short (e.g. "94", "40+")