nuxt-x-affiliate
Section Stitch
Shaped seam — diagonal, curve, waves, peaks — that stitches one section background into the next.
Section Stitch
A shaped transition between two stacked sections, so the seam between two background colours reads as a designed edge rather than a hard line.
topColor and bottomColor are raw CSS colours, not Tailwind classes —
they are painted into an SVG fill. Pass the same values the sections above
and below actually use.
Components
<XAFSectionStitch />
<XAFSection bg="subtle">…</XAFSection>
<XAFSectionStitch
variant="diagonal"
top-color="rgb(250 250 250)"
bottom-color="rgb(255 255 255)"
height="lg"
/>
<XAFSection>…</XAFSection>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'concave' | 'convex' | 'diagonal' | 'slant' | 'clouds' | 'waves' | 'tilt' | 'peaks' | 'scallop' | 'arrow' | 'diagonal' | Shape of the seam |
topColor | string | 'rgb(243 244 246)' | Colour of the section above (CSS colour) |
bottomColor | string | 'rgb(249 250 251)' | Colour of the section below (CSS colour) |
height | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'md' | Rendered height |
reverse | boolean | false | Mirror horizontally |
invert | boolean | false | Flip vertically |
glow | boolean | false | Draw a glowing line along the seam |
glowColor | string | 'rgba(99, 102, 241, 0.5)' | Glow colour (CSS colour) |
AI Context
component: XAFSectionStitch
package: "@xenterprises/nuxt-x-affiliate"
use-when: Decorative shaped transition between two sections