X Enterprises
nuxt-x-marketing

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.

PatternBg

The XMarkPatternBg component renders a decorative SVG pattern as a positioned, pointer-events-none background overlay. It is most often placed inside an XMarkSection's background slot via the section's bg.pattern shorthand, but can also be used standalone anywhere you want a subtle background texture. The color automatically flips black ↔ white with the active color mode unless overridden.

Components

<XMarkPatternBg />

Standalone:

<div class="relative h-64">
  <XMarkPatternBg pattern="topography" :opacity="0.08" />
  <div class="relative z-10 p-8">Content floats above the pattern.</div>
</div>

Inside a section:

<XMarkSection :bg="{ variant: 'subtle', pattern: 'grid', patternOpacity: 0.08 }">
  <h2>Section over a grid pattern</h2>
</XMarkSection>

Props

PropTypeDefaultDescription
patternstring'dots'Pattern variant. One of 'dots', 'grid', 'diagonal', 'topography', 'circuit', 'waves', 'plaid', 'diagonalPlaid', 'hexagons', 'triangles', 'crosses', 'zigzag', 'diamonds'.
opacitynumber0.05Pattern opacity, 0–1. Recommended range 0.03–0.15 for subtle textures.
colorstring'auto'Stroke color. 'auto' flips black/white with color mode. 'currentColor' uses inherited text color. Any CSS color also accepted.
fadebooleantrueFade the pattern to transparent at top and bottom edges so it blends into surrounding sections.

AI Context

category: UI Elements
package: "@xenterprises/nuxt-x-marketing"
components:
  - XMarkPatternBg
use-when: >
  Adding a subtle decorative texture to a section, card, hero background, or
  any container without shipping custom SVG. Pairs especially well with
  XMarkSection's `bg.pattern` shorthand for one-liner backgrounds.
typical-page-section: Behind hero, feature, pricing, CTA, and footer sections.

CodeBlock

Syntax-highlighted code block powered by Shiki, with optional language badge, copy-to-clipboard button, and SSR-safe ClientOnly fallback.

DividerGlow

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

Copyright © 2026