nuxt-x-affiliate
Section
Full-width page band with vertical rhythm, a max-width container, and an optional colour, image, pattern, or parallax background.
Section
The layout primitive every landing page is built from: one full-width band with consistent vertical rhythm and a max-width inner container.
Distinct from <XAFPageSection>, which is the simpler heading-plus-slot wrapper
used inside review article bodies. This one owns the full-bleed band and its background.
Components
<XAFSection />
<XAFSection bg="subtle" padding="lg">
<XAFFeatures :features="features" layout="grid" :columns="3" />
</XAFSection>
<!-- Photo background with a pattern layer and parallax drift -->
<XAFSection
:bg="{
variant: 'bold',
image: '/bench.jpg',
imageOverlay: 'heavy',
pattern: 'grid',
patternOpacity: 0.08,
parallax: true,
parallaxSpeed: 0.2,
}"
padding="xl"
>
<XAFCardGlass title="Reads well over photography" glow>…</XAFCardGlass>
</XAFSection>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
bg | SectionBg | string | {} | Background config. A bare string is shorthand for { variant } |
padding | 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'lg' | Vertical padding |
container | 'sm' | 'md' | 'lg' | 'xl' | 'full' | 'none' | 'lg' | Inner max-width |
bg object
| Key | Type | Description |
|---|---|---|
variant | 'default' | 'subtle' | 'elevated' | 'bold' | 'transparent' | Preset background colour |
color | string | Explicit Tailwind classes, overriding variant |
image | string | Background image URL |
imageAlt | string | Alt text for the background image |
imageOverlay | 'light' | 'heavy' | 'gradient' | Darkening layer over the image |
imagePosition | string | Tailwind object-* position class |
pattern | XafPatternName | Decorative pattern — see <XAFPatternBg> |
patternOpacity | number | Pattern opacity, 0–1 |
parallax | boolean | Drift the image slower than the page scroll |
parallaxSpeed | number | 0 = fixed, 1 = moves with scroll |
Slots
| Slot | Description |
|---|---|
| default | Section content, inside the container |
background | Extra background layer, behind the content and above the image |
AI Context
component: XAFSection
package: "@xenterprises/nuxt-x-affiliate"
use-when: Full-width page band with padding, container, and background