nuxt-x-affiliate
Page Section
Bounded-width section wrapper — three background tones and four padding scales.
Page Section
The XAFPageSection component is the canonical <section> wrapper for page bodies — sets a max-width container (max-w-7xl), consistent horizontal padding, and a choice of three background tones and four vertical padding scales. Pass id for in-page anchor links.
Components
<XAFPageSection />
<XAFPageSection bg="subtle" padding="xl">
<h2>Why we test</h2>
<p>We buy every product ourselves — no freebies, no PR loans.</p>
</XAFPageSection>
<XAFPageSection bg="dark" padding="lg" id="newsletter">
<h2>Join our newsletter</h2>
</XAFPageSection>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
bg | 'default' | 'subtle' | 'dark' | 'default' | Background tone. |
padding | 'xl' | 'lg' | 'sm' | 'none' | 'xl' | Vertical padding scale. |
id | string | — | Section ID for in-page anchors. |
Slots
| Slot | Description |
|---|---|
| default | Section content — automatically centered within the max-w-7xl container. |
AI Context
component: XAFPageSection
package: "@xenterprises/nuxt-x-affiliate"
use-when: Bounded-width section wrapper with three background tones and four padding scales for page bodies.