# SW Section Divider — AI Agent Reference

**Primary purpose:** Add a **full-width decorative SVG band** (wave, curve, angles, custom art) between page sections, with optional **negative overlap** so the divider tucks under the next or previous band. **Not** for body copy, CTAs, or forms—use **SW Pillar Section**, **SW Text and Media**, etc. for content.

**Capability summary (AI):** "SW Section Divider renders a viewport-wide divider bar from built-in SVG paths or a custom SVG (file or code), with solid / theme / gradient fill, per-breakpoint size and hide rules, overlap margins, and stacking controls (Pattern Layer + pointer-events)."

---

**Module name:** SW Section Divider  
**Use this document when:** The user asks how to place a wave or divider, fix a divider hidden behind the next section, set overlap, use custom SVG, or tune gradient/theme fill.

---

## Overview

- **Content tab:** Divider shape is configured at the **root** of Content (no nested wrapper group in current master).
- **No module background image or video** — this module is **divider-only** (`module.js` is a stub).
- **Position:** **Top** vs **Bottom** flips the shape vertically in markup (`scaleY(-1)` for top). There is **no separate "Flip vertical" field**; use Position for vertical flip intent.
- **Overlap adjacent section:** When on (default), the module applies a **negative margin** so the divider visually meets the neighboring section. **Overlap amount (px)** default **0** means "use the pattern height (XL)" as the overlap distance. **Position bottom** → negative `margin-top`; **Position top** → negative `margin-bottom`.

## Content tab (field groups at root)

- **Enable module**, **Custom ID**, **Custom classes** (standard).
- **Position** — Divider at **top** or **bottom** of the placement (affects flip and overlap direction).
- **Overlap adjacent section** — Toggle (default on).
- **Overlap amount (px)** — 0 = auto from pattern height XL; otherwise pixel overlap.
- **Pattern source** — **Built-in** vs **Custom**.
- **Built-in shape** — wave, curve, triangle, triangle inset, slant, zigzag, arc notch, steps, asymmetric wave. (**Line** was removed; legacy saved `line` maps to **wave** in HubL.)
- **Custom pattern mode** — **File** vs **Code** (only relevant when source is Custom).
- **Custom SVG file** — Image field (visible only when Custom + File; **AND** visibility rules).
- **Custom SVG code** — Text (SVG markup) when Custom + Code.
- **Fill** — **pattern_fill_type**: solid | theme | gradient (default **theme**). Related: custom solid color, **pattern_theme_color** (default **white**), gradient colors + angle.
- **Pattern width / height (XL)** — Scale the bar; **Preserve aspect ratio** toggle.
- **Flip horizontal** — Mirror built-in SVG horizontally.
- **LG / MD / XS–SM groups** — Override width/height/preserve-aspect and **hide pattern at breakpoint** per group when override is on.

## Style tab

- **Pattern Layer** (`pattern_z_index`) — Stacking order on the **outer** `.sw-section-divider` wrapper (default **15**). Tooltip explains interaction with neighboring sections when the divider appears "behind" the next block.
- **Pointer events** (`pattern_pointer_events`) — Whether the decorative bar captures clicks (often **none** so content below stays clickable).

**Legacy:** HubL reads `module.styles.pattern_*` first, then falls back to `module.styles.module_settings.pattern_*` for instances saved before fields moved to the Style root.

## HubSpot video and file uploads

- **Custom SVG file** uses the **File Manager** like other image fields. Same tier/storage limits as theme image fields.
- **No video** fields in this module.

## Common tasks ("How do I…")

- **Make the wave tuck under the next section:** Turn on **Overlap adjacent section**; set **Position** to **bottom**; leave **Overlap amount** at **0** or tune px. Raise **Pattern Layer** if the next section paints over the divider.
- **Divider disappears behind the following module:** Increase **Pattern Layer** (z-index) in Style; confirm the next section is not creating an opaque stacking context that still covers the divider.
- **Use our brand SVG:** Set **Pattern source** → **Custom**, **Custom pattern mode** → **File**, upload SVG; or **Code** and paste inline SVG.
- **Gradient looks wrong or solid:** Built-in gradients use **`userSpaceOnUse`** in master from **2026.04.07.19.59** onward; upgrade the module from master if an older copy predates that.

## Related modules

- **SW Pillar Section / SW Text and Media / SW Simple Hero** — Typical **content** blocks above/below the divider.
- **SW Simple Hero** — Full-band hero backgrounds; Section Divider is a **thin wave/divider** between sections, not a full hero replacement.

## CSS hooks (appendix)

- Root: `.sw-section-divider` (plus optional `smithworks-module`, custom classes, `data-instance`).
- Inner: `.sw-section-divider__inner` (`data-pat-pos` top|bottom).
- Bar: `.sw-section-divider__bar` (`aria-hidden="true"`).
- SVG container: `.sw-section-divider__svg-wrap`, `.sw-section-divider__svg-inner`.

Scoped `require_css` may emit breakpoint rules hiding `.sw-section-divider__bar` per LG/MD/SM hide toggles.

---

## Document version

**Module:** SW Section Divider (master / smithworks-2025). **Master version number:** 2026.04.16.09.36. **Doc last updated:** 2026-04-16. Changelog narrative: `SW-Dev/sw-master/sw-modules/CHANGELOG.md`.