nuxt-x-marketing
CheckBg
Archived — full-bleed diagonal "checker" SVG pattern overlay with parallax, configurable color and opacity, and built-in top/bottom fade-to-black gradients.
CheckBg
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 preferXMarkPatternBgwithpattern="diagonal".
The XMarkCheckBg component renders a full-bleed diagonal-line "checker" SVG pattern as a positioned, pointer-events-none background overlay. It applies a 0.4 parallax scroll effect and adds a 32px top + 32px bottom gradient that fades the pattern to the dark backdrop color (#0a0a0a).
Components
<XMarkCheckBg />
<div class="relative h-[60vh] overflow-hidden">
<XMarkCheckBg :opacity="0.5" color="#164e63" />
<div class="relative z-10 p-12">
<h1>Diagonal checker hero</h1>
</div>
</div>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
opacity | number | 0.5 | Pattern opacity, 0–1. |
color | string | '#164e63' | Line stroke color for the diagonal pattern. |
AI Context
category: Pattern
package: "@xenterprises/nuxt-x-marketing"
components:
- XMarkCheckBg
status: archived
use-when: >
Legacy dark hero/section background that needs a diagonal line pattern with
parallax scroll and built-in top/bottom fade. Prefer XMarkPatternBg
(pattern="diagonal") for new designs.
typical-page-section: Behind hero or full-bleed dark sections.
import: >
Not auto-imported (path begins with `_archive/`). Import explicitly:
import XMarkCheckBg from '@xenterprises/nuxt-x-marketing/app/components/X/Mark/_archive/Pattern/CheckBg.vue'