nuxt-x-affiliate
Features
Feature list in a grid, a stacked list, or alternating image/text rows, revealed on scroll.
Features
Icon or image, title, blurb, and an optional "Learn more" link, in three layouts. Items fade in on scroll via the layer's reveal observer — no setup required.
Components
<XAFFeatures />
<XAFSection bg="subtle">
<XAFFeatures :features="features" layout="grid" :columns="3" />
</XAFSection>
<script setup>
const features = [
{
icon: 'i-lucide-flask-conical',
title: 'Independently tested',
description: 'Every product bought at retail, tested on the same bench.',
link: { to: '/about/editorial', label: 'How we test' },
},
{
img: { src: '/bench.jpg', alt: 'Testing bench' },
title: 'Same conditions, every time',
description: 'Controlled comparisons, not vendor spec sheets.',
},
]
</script>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
features | Feature[] | 3 samples | The items to render |
layout | 'grid' | 'list' | 'alternating' | 'grid' | Arrangement |
columns | 2 | 3 | 4 | 3 | Columns in the grid layout |
Feature object
| Key | Type | Description |
|---|---|---|
title | string | Feature name |
description | string | Supporting line |
icon | string | Iconify name |
img | { src, alt? } | Image. Rendered in grid and alternating only |
link | { to, label?, target? } | string | Optional "Learn more" link |
Tips
alternatingswaps image and copy sides on every other row — the strongest layout when each feature has a real photo.listignoresimgby design; it has no room reserved for one.
AI Context
component: XAFFeatures
package: "@xenterprises/nuxt-x-affiliate"
use-when: Feature grid, list, or alternating image/text rows