PlaidBg

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 _archive path prefix. Use it for legacy designs only — for new work prefer XMarkPatternBg with pattern="plaid" or pattern="diagonalPlaid".

The XMarkPlaidBg component renders a full-bleed crisscross plaid pattern (8 diagonal lines in two colors, layered with varied opacities) as a positioned, pointer-events-none background overlay. The SVG <defs> block bakes in a configurable solid bgColor background, making this a fully self-contained dark themed hero background. It applies a 0.4 parallax scroll effect and adds a 32px top + 32px bottom gradient that fades to the configured bgColor.

Components

<XMarkPlaidBg />

<div class="relative h-[60vh] overflow-hidden">
  <XMarkPlaidBg
    :opacity="0.6"
    color="#164e63"
    color-secondary="#1e3a8a"
    bg-color="#0a0a0a"
  />
  <div class="relative z-10 p-12">
    <h1>Plaid-backed hero</h1>
  </div>
</div>

Props

AI Context

category: Pattern
package: "@xenterprises/nuxt-x-marketing"
components:
  - XMarkPlaidBg
status: archived
use-when: >
  Legacy dark hero/section background that needs a crisscross plaid pattern
  with a baked-in solid background and parallax scroll. Prefer XMarkPatternBg
  (pattern="plaid" or "diagonalPlaid") for new designs.
typical-page-section: Behind hero or full-bleed dark sections.
import: >
  Not auto-imported (path begins with `_archive/`). Import explicitly:
  import XMarkPlaidBg from '@xenterprises/nuxt-x-marketing/app/components/X/Mark/_archive/Pattern/PlaidBg.vue'