Feature Cards
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 |
<XCardGrid />
A lightweight CSS grid wrapper. Place any card components inside its default slot. Column breakpoints follow a mobile-first pattern: always 1 column on mobile, then expanding at md and lg.
<XCardGrid :columns="3" gap="md">
<XCardFeature
v-for="item in features"
:key="item.title"
:title="item.title"
:description="item.description"
:icon="item.icon"
/>
</XCardGrid>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
columns | 1 | 2 | 3 | 4 | 3 | Maximum number of columns at the largest breakpoint |
gap | 'sm' | 'md' | 'lg' | 'md' | Gap between grid items |
Gap reference (4px grid):
| Value | Mobile | Desktop |
|---|---|---|
sm | 16px | 16px |
md | 24px | 32px |
lg | 32px | 48px |
Column breakpoint reference:
columns | Mobile | md | lg |
|---|---|---|---|
1 | 1 col | 1 col | 1 col |
2 | 1 col | 2 col | 2 col |
3 | 1 col | 2 col | 3 col |
4 | 1 col | 2 col | 4 col |
AI Context
package: "nuxt-x-cards"
prefix: XCard
components:
- XCardFeature
- XCardGrid
use-when: >
Use XCardGrid + XCardFeature together for features, benefits, or stats
sections on marketing and product pages. XCardGrid is a generic slot-based
wrapper that works with any XCard component, not just XCardFeature.
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+")