nuxt-x-marketing

DividerGlow

Glowing horizontal section divider with 4 intensity levels (none, subtle, medium, strong), 3 thicknesses (thin, default, thick), and any Tailwind color.

DividerGlow

The XMarkDividerGlow component renders a thin horizontal line with an optionally glowing halo on either side. It's used between content blocks as a soft separator — far more dynamic than a 1px border but less theatrical than a full SVG section stitch. Color accepts any Tailwind color name (the color is interpolated into via-{color}-500 etc. classes) plus 'white' and 'neutral' as special cases.

Components

`<XMarkDividerGlow />`

Minimal — a subtle primary glow:

<XMarkDividerGlow />

Tall, neutral, no glow:

<XMarkDividerGlow color="neutral" intensity="none" height="thin" />

Full-page hero bridge — primary color, strong glow, thick bar:

<XMarkDividerGlow color="primary" intensity="strong" height="thick" spacing="py-24" />

Props

Prop	Type	Default	Description
`color`	`string`	`'primary'`	Any Tailwind color name (e.g. `'primary'`, `'indigo'`, `'emerald'`) or `'white'` / `'neutral'`.
`spacing`	`string`	`'py-16'`	Tailwind padding class controlling the vertical rhythm around the line.
`intensity`	`string`	`'medium'`	Glow strength: `'none'`, `'subtle'`, `'medium'`, `'strong'`. Higher intensities add an extra large halo.
`height`	`string`	`'default'`	Line thickness: `'thin'` (1px), `'default'` (2px), `'thick'` (4px).

AI Context

category: UI Elements
package: "@xenterprises/nuxt-x-marketing"
components:
  - XMarkDividerGlow
use-when: >
  Adding a glowing horizontal rule between sections or content blocks — softer
  than XMarkSectionStitch (no SVG shape break) but more dramatic than a plain
  border. Pairs naturally with neon / gradient hero designs.
typical-page-section: Between any two adjacent content blocks, between hero and first section, or above the footer.

Edit this pageorReport an issue

PatternBg

Decorative SVG background pattern overlay with 13 built-in patterns (dots, grid, diagonal, topography, circuit, waves, plaid, diagonalPlaid, hexagons, triangles, crosses, zigzag, diamonds) and dark-mode auto-color.

ButtonBackToTop

Floating scroll-to-top button that appears after a configurable scroll threshold, with 3 positions, 3 visual variants, and customizable icon/label.