# SW Hero — AI Agent Documentation **Module name:** SW Hero **Use this document when:** The user asks about the SW Hero HubSpot module—page/landing heroes, outer/inner Module Settings & Background, headings, CTAs, or how it differs from SW Simple Hero (Deprecated). **Last updated:** 2026.08.20.20.37 --- ## Instructions for the AI Agent - Prefer **SW Hero** for **new** website or landing page heroes. **SW Simple Hero** is **deprecated** (hidden from new content); do not tell users to add Simple Hero on new pages. Do **not** overwrite Simple Hero with Hero on sites that still use Simple Hero instances. - Style field root is **`styles`** (plural). Outer/inner Module Settings & Background follow the CTA Simple Bar / Pillar pattern—not the legacy Simple Hero single-layer model. - **No** `aliases_mapping` on this module (new module). - Support: https://smithworks.marketing/contact — Documentation / FAQs: https://smithworks.marketing/faqs --- ## HubSpot video and file uploads (plans and limits) This module offers **video** options that may use **HubSpot Video**, **Video from files** (File Manager), and/or **external embed** (YouTube, Vimeo, etc.), depending on the field. - **HubSpot Video:** Typically requires HubSpot subscription features for hosted video. - **Video from files:** File Manager limits often apply (e.g. ~20 MB per file on Free tiers)—compress or use External embed if needed. - **External embed:** Paste a supported URL (YouTube, Vimeo, etc.). Verify current portal rules in HubSpot’s help center. --- ## 1. Overview SW Hero is the canonical **Banners** hero: headings (repeater), rich text, CTA button repeater, optional outer band + inner background (theme/custom/gradient/image/video), height controls, and text-box settings. Use it for website and landing page heroes. **Related:** SW Blog Listing Hero / SW Blog Post Hero for blog templates; **SW Simple Hero (Deprecated)** only for existing instances. --- ## 2. Content tab (order) 1. Enable module, Custom ID, Custom Classes 2. Headings (repeater) 3. Content Area, Content style, Text Color 4. Buttons (alignment + repeater: text, link, style, icon) — email/phone link types emit `mailto:` / `tel:` 5. **Module Background Video** (last) — visible when Style → Module Inner Background Options = **Video** --- ## 3. Style tab (order) 1. **Module Settings** — Module Outer Spacing; Max Module Outer Width; Module Inner Spacing; Max Module Inner Width; XL/LG/MD/SM height groups (mode, height, vertical align) 2. **Module Background Settings** — Outer background options (including **Animated**) + Module Outer Border; **Module Inner Background Options** (theme/custom/gradient/image/video/**Effect** — **no Animated**); inner border (override default **off** → no stroke when off) 3. Content Colors / Link Colors 4. Text Box Settings (widths, padding, alignment defaults **center**, background, border radius via `--border_radius` when override off; **Effect** Glass / Grain / Pattern with optional **Rim**) --- ## 3a. Surfaces, Aurora, Custom SVG, text-box rim (2026.08.18.12.17) - **Module Outer Image** paints the outer image on `.sw-hero__module-outer-bg-fill` (not only CSS background on the root). - **Inner Effect** and **text-box Effect** each support **Glass**, **Grain**, and **Pattern**. Custom SVG is a Pattern Style (Content tab Custom SVG Code fields). - **Outer Aurora** and **Inner Aurora** can overlay Theme Color / Custom Color / Gradient / Image (off for None / Divided/Split on outer; off for Video / Effect on inner). Aurora motion default **on**, 8s. Blob-style Custom SVG is available in the editor for Inner Aurora. - **Text-box rim** (Glass / Grain / Pattern including Custom SVG): Rim 0–50px. **New** Effect text boxes default to **25px** rim with a solid face fill. Rim **0** is full-panel (no face). Existing saved 0 stays 0. - Do **not** assume Cards has the same surface set until that module is explicitly updated. --- ## 3b. Module Outer Animated (2026.08.18.20.23) - **Animated** is a **Module Outer** Background Option only. It is **not** available on Module Inner or the text box. - **Motion** is the engine: **Roll** (cylindrical pitch) or **Ripple** (left-to-right). The stored Ripple value is still `wave`. - **Artwork Wave 1–5** are ribbon drawings (open strokes). They are not the Ripple engine. Theme Color or Custom Color recolors the lines; per-line opacity in the SVG is kept. Gradients are ignored on the canvas. - Phones, coarse pointers, and `prefers-reduced-motion` show a static SVG with the same rotate/position/scale. Outer Aurora Overlay is hidden while Animated is selected. - Ribbon SVG prep (Illustrator): open strokes, `fill="none"`, no Outline Stroke / Expand, no opacity mask, SVG not `.ai`. See process `PROCESS-MODULE-OUTER-ANIMATED.md`. --- ## 3c. None fills, Outer Image stack, Inner Width, Theme Color parity (2026.08.18.23.32) - **Module Inner Background Options** and **Text Box Background Options** now include **None** as the first choice (additive). Defaults unchanged (Inner **custom**, text box **color**) so existing pages stay the same until an editor picks **None**. HubL `none` = transparent; Inner does not fall through to a legacy image `else`. Inner Aurora stays hidden when Inner = **None**. - **Module Outer Image** uses the same field stack as Inner: type **`image`** + **Background Size** (`hero_background_size` / `_lg` / `_md` / `_sm`: **Cover**, **Contain**, Stretch, Natural Size). Group order: overlay, base, image, position, repeat, size. Same image field paths so stored `src` can survive. HubL prefers Background Size, falls back to leftover `background_size`, supports `size_type: exact`. - **Max Module Inner Width** default reverted to **Default** (theme container ~1800px), not Full Width. New instances use Default; existing saved values unchanged. - **Theme Color HubL:** Legacy stored token **`none`** on Inner or Outer Theme Color renders **transparent** (no `var(--none)` gray fallback). - **Inner glass fill:** HubL default opacity **35** (matches the Inner Glass field default). --- ## 4. Field paths (canonical) - **Module Settings:** `module.styles.module_settings` — `spacing`, `outer_background_width`, `inner_spacing`, max widths, `module_height_*_group` - **Module Background Settings:** `module.styles.module_background_settings` — `outer_*` (including `outer_animated` when Outer = Animated), `background_option` (inner), image/video groups, `inner_border_*` - **Module Background Video:** `module.background_video_settings` (Content) - **CTAs:** `module.cta_button_items` (link defaults sample: `https://smithworks.marketing/hubspot-consulting`) --- ## 5. Common tasks - **New page hero** → Add **SW Hero**, not Simple Hero. - **Email / phone CTA** → Use HubSpot email or phone link type; module prefixes `mailto:` / `tel:`. - **No inner border** → Leave Override Module Inner Border **off**. - **Transparent inner or text box** → Module Inner Background Options = **None**, or Text Box Background Options = **None** (or Color opacity **0%** on legacy instances). - **Outer image Cover vs Contain** → Module Outer Background Options = **Image** → **Background Size** (Cover / Contain / Stretch / Natural Size). - **Animated outer band** → Module Outer Background Options = **Animated**; pick Motion (Roll or Ripple) and Artwork Wave 1–5. - **Brand Kit favicon in the browser tab** → Theme `templates/header.html` (not this module). --- ## 6. References - MODULE-SETTINGS-BACKGROUND-STANDARD.md - PROCESS-MODULE-OUTER-INNER-FIELD-REORG.md - PROCESS-MODULE-OUTER-ANIMATED.md - PROCESS-CSS-SURFACE-EFFECTS.md - PROCESS-MODULE-SETTINGS-BACKGROUND-VIDEO-INSTALL.md - PROCESS-DEPRECATED-NEW-MODULE-COEXISTENCE.md --- **Changelog (AI doc):** - 2026.08.20: **Master 2026.08.20.20.37** — Post-Aurora labeling (Background Size); Space Above Buttons; Icon Spacing / Hide Button Text / Override Button Margins; CTA defaults → sw-module-documentation; sample Outer Custom `#d6ebf7` + Outer Aurora (field-level). Existing instances keep saved Style. - 2026.08.18: **Master 2026.08.18.23.32** — Inner + text box **None** fill; Outer Image stack (Cover / Contain / Stretch / Natural Size); Inner Width default **Default**; Theme Color legacy token `none` → transparent; Inner glass fill default **35**. - 2026.08.18: **Master 2026.08.18.20.23** — Module Outer **Animated** (Roll / Ripple; Artwork Wave 1–5). Inner and text box unchanged (no Animated). - 2026.08.18: **Master 2026.08.18.12.17** — Outer Image paint; Inner/text-box Glass, Grain, Pattern; Outer/Inner Aurora (motion default on); Custom SVG Content fields; text-box rim default 25px. - 2026.08.03: **Master 2026.08.03.15.38** — `css_render_options.async: false` so layout/`min-height`/LCP CSS is render-blocking (reduces first-paint CLS height snap). - 2026.08.01: **Master 2026.08.01.09.59** — Overflow clip on outer/`.sw-hero`; video iframes use `100%` (no `100vw`) so Hero cannot widen the document. Residual ~15px scroll on Chromatic was SW Cards gutters—see SW-Cards.txt. - 2026.07.30: **Master 2026.07.30.19.25** — Empty CTA shell gated; trailing content-area margin zeroed; empty Text Box Padding defaults to 0. - 2026.07.27: **Master 2026.07.27.21.59** — Initial **SW-Hero.txt** for new outer/inner SW Hero; Simple Hero deprecated.