# SW CTA Simple Bar — AI Agent Reference

**Module name:** SW CTA Simple Bar  
**Use this document when:** The user asks about the SW CTA Simple Bar HubSpot module—what it does, how **Module Outer** relates to the page section, how to configure icons, **Content Area**, **Buttons**, or backgrounds.

**Master version number (check `module.html`):** 2026.05.11.17.10

---

## 1. Overview

**SW CTA Simple Bar** is an **in-page** (non-popup) CTA band: optional **icon**, rich text **Content Area**, and a **Buttons** repeater (up to 8 rows). On large viewports it lays out as a single row with Bootstrap columns (default split icon / message / buttons); on smaller viewports it **stacks**. When stacked, the **icon column centers** the icon above the message row; at **992px+** the icon aligns to the **start** of its column beside copy and buttons.

**Not** SW CTA Popup or SW Popup Panel—those are **overlay** modules.

---

## 2. Why Module Outer exists

**Module Outer** (under **Style → Module background**, hoisted **`outer_*`** fields) adds options **beyond typical HubSpot section settings** when you need an extra **full-width band** behind the narrower inner bar.

- **Overlay the section:** Combine **page section** styling with an **outer** backdrop inside this module instance—for example a **semi-transparent outer image** so the **section background color** shows through.
- **Stacked backgrounds / depth:** e.g. **section** color → **Module Outer** at a **large** max width with a **second** color or image → **Module Inner** (the bordered bar) **narrower** with a **third** fill.

Reference: **`docs/MODULE-SETTINGS-BACKGROUND-STANDARD.md`** (outer band + “Why Module Outer exists”); process details **`docs/temp/PROCESS-MODULE-OUTER-INNER-FIELD-REORG.md`**.

---

## 3. Module Settings vs Module background (layering)

- **Module Settings:** **Module Outer Spacing**, **Max Module Outer Width**, **Module Inner Spacing**, **Max Module Inner Width**, module height groups.
- **Module background:** **Module Outer Background Options** first with plain labels such as **None**, **Theme Color**, **Custom Color**, **Gradient**, **Image**, **Divided/Split** (no repeated **`Module Outer:`** prefix). Then **Module Outer Border Style / Weight / Color** for optional top/bottom borders on the outer band. After that, **Module Inner Background Options** uses the same plain label style (**Theme Color**, **Custom Color**, **Gradient**, **Image**, **Video**), followed by the inner image / color / **video** controls and **Module Inner Border Style / Weight / Color** for matching top/bottom borders on the inner background layer.
- **Inner spacing:** Applied on **`.sw-cta-simple-bar__inner`** (bordered bar). Prefer **padding**; vertical **margin** may **collapse**—see module **`fields.json`** help_text on **Module Inner Spacing**.

---

## 4. Content tab (summary)

- **Enable module**, **Custom ID**, **Custom classes**
- **Icon type** (Font Awesome / image / SVG / none); icon fields
- **Content Area** (richtext); **Content style**
- **Buttons** repeater; **Buttons layout** (Inline / Stacked)
- **Module Inner: Background Video** (when inner background = Video)

Default link URL for new buttons should follow project standard: **`https://smithworks.marketing/hubspot-development`**.

---

## 5. Style tab (summary)

- **Module Settings** (outer/inner spacing and widths; heights)
- **Module background** (outer stack, then inner stack)
- **CTA Bar Layout** (desktop column weights 12-column; border style/weight/color; radius override)
- **Icon Settings** (size, color)
- **Content Colors** (text color, link context)

---

## 6. Choosing another module

| Need | Module |
|------|--------|
| Corner / overlay popup | **SW CTA Popup** or **SW Popup Panel** |
| Two-column story + form | **SW Pillar Section** |
| Stacked image + long copy | **SW Text and Media** |

---

## 7. CSS hooks (abbrev.)

Root **`.sw-cta-simple-bar`**. Outer band **`.sw-cta-simple-bar__module-outer-root`**, **`.sw-cta-simple-bar__module-outer-bg`**. Inner column **`.sw-cta-simple-bar__container`**. Bordered bar **`.sw-cta-simple-bar__inner`**. Columns **`.sw-cta-simple-bar__icon-col`** (flex: centers icon when column is full-width stacked; **`justify-content: flex-start`** at **≥992px**), **`__message-col`**, **`__button-col`**. May share **`smithworks-module-outer-*`** classes with **SW Pillar Section**.

---

## 8. Document version

- **2026-05-11 / Finish Up 2026.05.11.17.10:** Added matching **top and bottom border** controls for the **Module Outer** and **Module Inner** layers, cleaned both background-option dropdowns to plain labels (no repeated **`Module Outer:`** / **`Module Inner:`** prefixes), and synced the shipped CTA docs bundle.  
- **2026-05-07 / Finish Up 2026.05.07.17.28:** Icon column **centered when stacked**; **`flex-start` at lg+**; Master **2026.05.07.17.28**; synced SW AI Documentation + FAQs + public changelog.  
- **2026-05-07 / Finish Up 2026.05.07.15.15:** Initial bundled **.txt**; Module Outer doctrine; merged Simple Module queue into official version.

**Related standards:** `MODULE-SETTINGS-BACKGROUND-STANDARD.md`, `MODULE-FIELD-LABELING-STANDARD.md`, `MODULE-SAMPLE-CONTENT-STANDARD.md` (CTA default URL), `PROCESS-MODULE-SETTINGS-BACKGROUND-VIDEO-INSTALL.md`.