nuxt-x-marketing

SectionStitch

SVG section divider with 10 shape variants (diagonal, slant, concave, convex, tilt, waves, clouds, peaks, scallop, arrow), configurable colors, height, glow line, and directional flips.

SectionStitch

A full-width SVG divider used to break between sections. Renders an SVG path that fills the divider area with a bottomColor on top of a topColor background, then optionally flips/reverses for any layout direction. An optional centered glow line is rendered at the midline.

Components

`<XMarkSectionStitch />`

<!-- Diagonal divider between two white sections -->
<XMarkSectionStitch
  variant="diagonal"
  top-color="rgb(243 244 246)"
  bottom-color="rgb(255 255 255)"
  height="md"
/>

<!-- Arrow divider pointing into the next section -->
<XMarkSectionStitch
  variant="arrow"
  top-color="rgb(255 255 255)"
  bottom-color="rgb(9 9 11)"
  height="lg"
  glow
  glow-color="rgba(99, 102, 241, 0.5)"
/>

Props

Prop	Type	Default	Description
`variant`	`string`	`'diagonal'`	Shape variant: `'concave'`, `'convex'`, `'diagonal'`, `'slant'`, `'clouds'`, `'waves'`, `'tilt'`, `'peaks'`, `'scallop'`, `'arrow'`.
`topColor`	`string`	`'rgb(243 244 246)'`	CSS color (or `rgb(...)`) filling the upper background of the SVG.
`bottomColor`	`string`	`'rgb(249 250 251)'`	CSS color filling the divider path.
`height`	`string`	`'md'`	Divider height: `'sm'` (40px), `'md'` (64px), `'lg'` (96px), `'xl'` (128px), `'2xl'` (160px), `'3xl'` (200px).
`reverse`	`boolean`	`false`	Flip the SVG horizontally.
`invert`	`boolean`	`false`	Flip the SVG vertically (mirror across horizontal axis).
`glow`	`boolean`	`false`	Render a 1px glow line at the midline.
`glowColor`	`string`	`'rgba(99, 102, 241, 0.5)'`	Glow line color (also used for the box-shadow).

AI Context

category: Layout
package: "@xenterprises/nuxt-x-marketing"
components:
  - XMarkSectionStitch
use-when: >
  Adding a styled SVG shape divider between two sections — useful for
  editorial layouts, landing-page section transitions, or any place a
  flat color break feels too sharp. Pick from 10 shape variants and
  optionally add a glow line for emphasis.
typical-page-section: Between any two adjacent sections in a marketing page.

Edit this pageorReport an issue

AffiliateDisclosure

FTC-compliant affiliate disclosure in subtle, banner, or inline variants with optional dismiss persistence.

PrivacyCookieConsent

Consent-aware cookie banner + preferences modal that auto-fires configured tracking scripts (GTM / GA4 / Clarity / Meta Pixel / Hotjar / etc.) only after the visitor grants consent. Drop tracking IDs into app.config.xMarketing.tracking and the banner handles the rest.