HexBg

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="hexagons".

The XMarkHexBg component renders a full-bleed hexagonal 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) — a self-contained hero/section background designed for dark themes.

Components

<XMarkHexBg />

Must be used as a child of a position: relative container:

<div class="relative h-[60vh] overflow-hidden">
  <XMarkHexBg :opacity="0.4" color="#164e63" />
  <div class="relative z-10 p-12">
    <h1>Hexagon-backed hero</h1>
  </div>
</div>

Props

AI Context

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