nuxt-x-affiliate
Stat Highlight
Big-number statistic card — value + label + optional icon, context, and trend indicator.
Stat Highlight
The XAFStatHighlight component renders a big-number statistic card — the kind of "200+ products tested", "8 years experience", "98% would recommend" callout you see on About pages and review intros. Three visual variants: default, hero (larger), compact.
Components
<XAFStatHighlight />
<XAFStatHighlight
:value="4.6"
label="Average editor rating"
icon="⭐"
context="Across 200+ products tested"
trend="↑ 0.2 vs last year"
/>
<XAFStatHighlight variant="hero" value="200+" label="Products tested" />
Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | number | required | The big number / stat (e.g. "4.6", "1,247", "98%"). |
label | string | required | Caption below the value. |
icon | string | — | Optional leading emoji / icon. |
context | string | — | Optional small description below the label. |
trend | string | — | Trend indicator (e.g. "↑ 12% vs last quarter"). |
variant | 'default' | 'hero' | 'compact' | 'default' | Visual variant — controls padding and number size. |
AI Context
component: XAFStatHighlight
package: "@xenterprises/nuxt-x-affiliate"
use-when: Big-number statistic card with optional icon, context, and trend indicator in default / hero / compact.