nuxt-x-marketing
Background
Archived — full-bleed SVG pattern background with 6 pattern variants (dots, grid, diagonal, topography, circuit, waves), configurable color, opacity, and background size.
Background
Status: archived. This component lives under an
_archive/directory in the source repo and is not part of the actively-recommended UI surface. It ships in the published NPM tarball (1.2.3) but is not auto-imported by Nuxt because of the_archivepath prefix. Use it for legacy designs only — for new work preferXMarkPatternBg(which offers 13 patterns including the same 6 plus 7 more).
The XMarkBackground component renders a full-bleed SVG pattern as a positioned, pointer-events-none background overlay with no parallax and no built-in edge fade. Supports 6 pattern variants via the pattern prop.
Components
<XMarkBackground />
<div class="relative h-64">
<XMarkBackground pattern="grid" :opacity="0.08" />
<div class="relative z-10 p-8">Content floats above the pattern.</div>
</div>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
pattern | string | 'dots' | Pattern variant. One of 'dots', 'grid', 'diagonal', 'topography', 'circuit', 'waves'. |
opacity | number | 0.05 | Pattern opacity, 0–1. |
size | string | 'auto' | CSS background-size value (e.g. 'auto', '20px 20px', 'cover'). |
color | string | 'currentColor' | Stroke color. 'currentColor' resolves to black (rgb(0,0,0)) at render time; any CSS color also accepted. |
AI Context
category: Pattern
package: "@xenterprises/nuxt-x-marketing"
components:
- XMarkBackground
status: archived
use-when: >
Legacy background pattern with one of 6 simple variants. Prefer
XMarkPatternBg for new designs (13 patterns, dark-mode auto color, edge fade).
typical-page-section: Behind any section, card, or hero that wants a subtle pattern texture.
import: >
Not auto-imported (path begins with `_archive/`). Import explicitly:
import XMarkBackground from '@xenterprises/nuxt-x-marketing/app/components/X/Mark/_archive/Pattern/Background.vue'