Feature Cards
Feature
Feature card supporting icon, image, and stat display layouts with four visual variants.
Feature Cards
XCardFeature and XCardGrid are designed to work together. Use XCardGrid as the outer container to control column count and spacing, then place XCardFeature (or any other card) inside the default slot.
Components
<XCardFeature />
A versatile feature card that 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; icon is suppressed when imageUrl is present. Four visual variants control the card surface.
<!-- 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 (use 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 | — | Card headline (required) |
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 |
stat | { value: string; label: string } | — | Large stat figure with a smaller label below |
variant | 'default' | 'elevated' | 'bordered' | 'glass' | 'default' | Card surface style |
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
category: FeatureCards
package: "@xenterprises/nuxt-x-cards"
components:
- XCardFeature
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+")