Archived: SectionStitch

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 the non-archived XMarkSectionStitch (file X/Mark/Section/Stitch.vue), which exposes 10 shape variants including concave, convex, slant, clouds, peaks, scallop, and arrow not available here.

Naming note: This file (X/Mark/_archive/Pattern/SectionStitch.vue) is distinct from the canonical XMarkSectionStitch at X/Mark/Section/Stitch.vue. The archived variant is documented here as XMarkSectionStitchArchived to avoid collision in this index. If you manually import it, the source path is the source of truth — not the name used here.

A full-width SVG divider used to break between sections. Renders one of 5 SVG paths that fills the divider area with a bottomColor on top of a topColor background. A flip boolean reverses the angle variant's points. An optional glow line is rendered at the midline.

Components

<XMarkSectionStitchArchived />

<!-- Manual import required — not auto-imported -->
<script setup>
import XMarkSectionStitchArchived from '@xenterprises/nuxt-x-marketing/app/components/X/Mark/_archive/Pattern/SectionStitch.vue'
</script>

<template>
  <XMarkSectionStitchArchived
    variant="wave"
    top-color="var(--color-neutral-100)"
    bottom-color="var(--color-neutral-50)"
    height="md"
  />
</template>

Props

AI Context

category: Pattern
package: "@xenterprises/nuxt-x-marketing"
components:
  - XMarkSectionStitchArchived
status: archived
use-when: >
  Legacy SVG section divider when one of the 5 archived shape variants
  (angle, wave, curve, triangle, zigzag) is specifically required. Prefer
  the non-archived XMarkSectionStitch (X/Mark/Section/Stitch.vue) for
  new designs — it offers 10 variants and is auto-imported.
typical-page-section: Between any two adjacent sections in a marketing page.
import: >
  Not auto-imported (path begins with `_archive/`). Import explicitly:
  import XMarkSectionStitchArchived from '@xenterprises/nuxt-x-marketing/app/components/X/Mark/_archive/Pattern/SectionStitch.vue'