# SW Image & Text — AI Agent Reference

**Primary purpose: Stacked layout module.** Use this module when the image should appear **ABOVE** the content (stacked), not beside it. **Not for:** Side-by-side image + content layouts.

**Capability summary (AI):** "This module is for a stacked layout: image first, then content, with no side-by-side option."

**Looking for side-by-side image + content?** Use **SW Pillar Section**.

**Don't use SW Image & Text when:** The request includes "image on the left/right," "two columns," "side-by-side," or alternating image alignment per section—use SW Pillar Section instead.

---

**Module name:** SW Image & Text  
**Use this document when:** The user asks about the SW Image & Text HubSpot module—what it does, how to configure it, or how to change the image, Content Area text, alignment, background, or spacing.

---

## Instructions for the AI Agent

- **Unless the user explicitly provides you with direct HubSpot CLI access, assume you have no access to HubSpot.** You cannot see the backend, Design Manager, or theme files unless given that access. Answer **only** from this document (and any other docs the user has provided).
- **Configuration:** When the user asks how to change something, tell them exactly **where to go** in the module (tab names, group names, field labels) and what to select or enter. Use the **exact** names given in the "Configuration Reference" below.
- **Not configurable via the module:** If the request cannot be done with module fields, say so clearly. Then direct the user to **custom CSS** in their theme's custom CSS file. For **Sprocket Rocket–based themes**, that file is usually **`custom-styles.css`** in the theme. Use the "Appendix: CSS Classes and Selectors" to give exact selectors when possible.
- **Support and bugs:** For module-specific support requests or bug reports, direct the user to **https://smithworks.marketing/contact**.

---

## Support and Bug Reports

For **support requests** or **bug reports** about the SW Image & Text (or other Smithworks modules):

- **Contact:** [smithworks.marketing/contact](https://smithworks.marketing/contact)

---

## 1. Purpose and When to Use

**Intent:** The SW Image & Text module is a **simple image and/or text module** aligned with the Sprocket Rocket Theme. It is **intentionally minimal**—no heading repeaters, no button repeaters, no card or list repeaters. Its purpose is to give users an **image and/or rich-text block** that matches the theme’s styling and behavior instead of using generic HubSpot image or rich-text elements. Conceptually it is similar to **SW Button**: a theme-aligned replacement for a core HubSpot element, not a full section builder.

The **SW Image & Text** module provides:

- **4-tier responsive image** — XL Image (1200px+), with optional Override Desktop / Desktop Image (992–1199px), Override Tablet / Tablet Image (768–991px), Override Mobile / Mobile Image (≤767px). Placeholder appears in the editor via XL default; use **Remove** on the image to show no image.
- **Image alignment per breakpoint** — Inherit, Left, Center, or Right for each level (XL, Desktop, Tablet, Mobile). Default: Center.
- **Content Area** — Single rich-text field. Leave blank to hide the text block.
- **Module Settings and Module Background Settings** — Spacing, max width, module height (Default/Custom/Full Screen), vertical alignment; background option (Theme Color, Custom Color, Gradient, Image, or Video). When Video: overlay, base color, and playback toggles (Autoplay, Loop, Muted, Plays Inline) are in **Style** tab; video source and poster are in **Content** tab → Module Background Video.

Use it for **simple image blocks**, **image + caption**, **standalone text blocks** (image removed), or **theme-aligned image/rich-text** where you do not need headings, buttons, or repeaters.

### Use Cases

- **Capabilities:** Simple image + rich text; responsive image; alignment per breakpoint. No headings, bullets, or CTAs.
- **Use for:** Simple image+caption; image+text block; standalone text (image removed); theme-aligned image/rich-text where you don't need headings, bullets, or CTAs.
- **When to choose SW Pillar Section instead:** When you need headings, bullets, CTAs, or alternating image left/right across multiple sections. SW Pillar Section has those; SW Image & Text does not. Choose by capabilities needed, not page length.

### Related Modules

| Module | Relationship |
|--------|--------------|
| **SW Pillar Section** | Image/video beside content with headings, bullets, CTAs. Add multiple instances for alternating layout. Choose when you need structured content. |
| **SW Pillar Accordion** | Accordion with image per panel. Different layout. |

---

## 2. Module Structure (What You See on the Page)

From top to bottom:

1. **Background (optional)** — Image, color, gradient, or video from Module Background Settings. Video sits behind content when Background Option = Video.
2. **Inner container** — Constrained by Max Module Width (Module Settings). Contains:
3. **Image (optional)** — Responsive `<picture>` with one image per breakpoint (or none if user clicked Remove on XL Image). Alignment (left/center/right) can vary by breakpoint.
4. **Content Area (optional)** — Rich text. Renders below the image when present. If empty, the text block does not render.

---

## 3. Configuration Reference

The module has **Content** and **Style** tabs. Group and field names below match the HubSpot editor.

### 3.1 Content Tab

**Custom ID**  
- Optional. Replaces the default HTML `id` on the module wrapper.

**Custom Classes**  
- Optional. Extra CSS classes on the module wrapper for custom styling.

---

**Image** (group, collapsed by default)  
- **Where:** Content tab → **Image** (group).  
- **What:** 4-tier responsive images and alignment. Expand the group to access XL Image and per-breakpoint overrides.

**XL Image**  
- **Where:** Content tab → **Image** (group) → **XL Image**.  
- **What:** Primary image for 1200px+ (XL). Default placeholder appears in the editor. Smaller breakpoints inherit this image unless overrides are enabled.  
- **To show no image:** Click **Remove** (or clear the image). No separate “hide image” toggle.

**Image alignment (XL)**  
- **Where:** Content tab → **Image** (group), below XL Image.  
- **What:** Horizontal alignment at XL: Inherit, Left, Center, Right. Default: Center.

**Override Desktop Image** (toggle)  
- **Where:** Content tab → **Image** (group).  
- **What:** When **on**, **Desktop Image** and **Image alignment (Desktop)** appear. When **off**, Desktop uses XL image and alignment.

**Desktop Image**  
- **Where:** Content tab. Visible when Override Desktop Image is **on**.  
- **What:** Image for 992px–1199px (LG). Inherit uses XL when override is off.

**Image alignment (Desktop)**  
- **Where:** Content tab. Visible when Override Desktop Image is **on**.  
- **What:** Inherit (uses XL), Left, Center, Right. Default: Center.

**Override Tablet Image** (toggle)  
- **Where:** Content tab.  
- **What:** When **on**, **Tablet Image** and **Image alignment (Tablet)** appear.

**Tablet Image** / **Image alignment (Tablet)**  
- Same pattern as Desktop. Breakpoint: 768px–991px (MD).

**Override Mobile Image** (toggle)  
- **Where:** Content tab.  
- **What:** When **on**, **Mobile Image** and **Image alignment (Mobile)** appear.

**Mobile Image** / **Image alignment (Mobile)**  
- Same pattern. Breakpoint: ≤767px (SM).

---

**Content Area**  
- **Where:** Content tab.  
- **What:** Rich text. Default: Large (text balanced) styling. **Leave blank to hide the text block** (it will not render). Text alignment can be overridden per breakpoint in Style tab → Content Area Settings.

**Content style**  
- **Where:** Content tab, below Content Area.  
- **What:** Typography for the content: Default (normal body text), Large (text balanced), Large (text full-width), Small, Blockquote. Default: Large (text balanced). Use for intro text, quotes, or secondary text.

**Module Background Video** (group)  
- **Where:** Content tab. Visible when **Style** tab → **Module Background Settings** → **Background Option** = **Video**.  
- **What:** Video Type (HubSpot Video, Video from files, External Embed), HubSpot Video, Video File, External Embed URL, Poster image. **Overlay and base color are in Style tab** (Module Background Settings when Video). See theme docs for Module Settings and Background Standards.

---

### 3.2 Style Tab

**Module Settings** (first)  
- **Where:** Style tab → **Module Settings**.  
- **What:** Spacing (margins/padding), Max Module Width (Default, Small, Large, Full Width, Custom), XL Module Height (Minimum Height: Default, Custom Height, Full Screen) with Override Desktop/Tablet/Mobile Height and Vertical Alignment per breakpoint.

**Module Background Settings** (second)  
- **Where:** Style tab → **Module Background Settings**.  
- **What:** Background Option (Theme Color, Custom Color, Gradient, Image, Video). When **Image**: XL Background Image plus Override Desktop/Tablet/Mobile Background Image groups (image, position, repeat, overlay, base color per breakpoint). When **Video**: Overlay color, Base color, and playback toggles (Autoplay, Loop, Muted, Plays Inline) appear here; video source and poster are in **Content** tab → Module Background Video.

**Content Colors** (third)  
- **Where:** Style tab → **Content Colors**.  
- **What:** Text Color (Theme defaults, Primary, Secondary, etc., or Custom) and Link Colors (Theme defaults, Dark, Light) for the Content Area. Defaults: Theme defaults. Use when background is Custom Color or when theme cascade does not apply.

**Content Area Settings** (fourth)  
- **Where:** Style tab → **Content Area Settings**.  
- **What:** Text alignment for the Content Area rich text. **Text Alignment (Desktop)** — Left, Center, Right (applies at 992px+). **Override Text Alignment (Tablet)** — toggle + Text Alignment (Tablet) for 768–991px. **Override Text Alignment (Mobile)** — toggle + Text Alignment (Mobile) for ≤767px. These override inline `text-align` in the rich text.

---

## 4. Common Tasks ("How Do I…")

### Change or replace the main image  
**Content** tab → **Image** (group) → **XL Image**. Upload or select image; use **Replace** or **Remove** as needed. Smaller breakpoints inherit unless you turn on Override Desktop/Tablet/Mobile Image and set a different image.

### Show no image (text only)  
**Content** tab → **Image** (group) → **XL Image** → click **Remove**. The image area will not render.

### Use a different image on mobile (or tablet/desktop)  
**Content** tab → **Image** (group) → turn **on** **Override Mobile Image** (or Override Tablet Image / Override Desktop Image) → set **Mobile Image** (or Tablet/Desktop Image).

### Change image alignment (left / center / right)  
**Content** tab → **Image** (group) → **Image alignment (XL)** (and, if overrides are on, Image alignment for Desktop, Tablet, Mobile). Choose Inherit, Left, Center, or Right. Inherit at smaller breakpoints uses the larger breakpoint’s alignment.

### Change the text below the image  
**Content** tab → **Content Area**. Edit the rich text. Leave blank to hide the text block.

### Change content typography (lead, small, blockquote)  
**Content** tab → **Content style**. Choose Default, Large (text balanced), Large (text full-width), Small, or Blockquote.

### Change text alignment (left / center / right)  
**Style** tab → **Content Area Settings** → **Text Alignment (Desktop)**. Use **Override Text Alignment (Tablet)** and **Override Text Alignment (Mobile)** for per-breakpoint alignment. These override inline alignment in the rich text.

### Change module background (color, gradient, image, or video)  
**Style** tab → **Module Background Settings** → **Background Option**. For **Video**, set Option to Video here, then: **Style** tab → overlay, base color, playback toggles (Autoplay, Loop, Muted, Plays Inline); **Content** tab → Module Background Video for source and poster.

### Change module spacing or max width  
**Style** tab → **Module Settings** → **Spacing**; **Max Module Width**. When no padding is set, the module uses no padding (no default 25px).

### Set module height (content height, custom px, or full screen)  
**Style** tab → **Module Settings** → **XL Module Height** → **Minimum Height** (Default, Custom Height, Full Screen). Use Override Desktop/Tablet/Mobile Height for per-breakpoint height.

### Add a custom HTML id or CSS class  
**Content** tab → **Custom ID**, **Custom Classes**.

---

## 5. When to Use Custom CSS

Use **custom CSS** when:

- The change cannot be done with the module’s **Content** or **Style** fields (e.g. image border radius, custom typography for the Content Area, specific spacing between image and text).
- You need to target a **specific instance** (e.g. via **Custom ID** or **Custom Classes**).

**Where to add it:**  
- In your theme’s **custom CSS** file. For **Sprocket Rocket–based themes**, that file is usually **`custom-styles.css`** in the theme.  
- Add your overrides there so they persist across theme updates.

**How to target elements:**  
- Use the **CSS classes** in the **Appendix** below. Use `data-instance` or **Custom ID** / **Custom Classes** for instance-specific overrides.

---

## 6. Appendix: CSS Classes and Selectors

Use these for **custom CSS** overrides. The module wrapper also has `smithworks-module` and any **Custom Classes** you add.

| Element | Class(es) | Notes |
|--------|-----------|--------|
| Module wrapper | `.sw-image-text` | Plus `custom_classes` if set. `id` = **Custom ID** if set. `data-instance` for unique instance. Modifiers: `.sw-image-text--has-bg-image`, `.sw-image-text--has-bg-video`. |
| Inner (max-width) | `.sw-image-text__inner` | Constrained by Max Module Width. |
| Container (image + text) | `.sw-image-text__container` | Flex column; image then text. |
| Image wrapper | `.sw-image-text__image` | Wraps `<picture>`. `text-align` controls alignment (left/center/right) per breakpoint. |
| Picture | `.sw-image-text__picture` | `display: inline-block` so alignment works. |
| Image img | `.sw-image-text__img` | Fallback `<img>` inside picture. |
| Text block | `.sw-image-text__text` | Wraps Content Area rich text. |
| Video wrapper | `.sw-image-text__video-wrap` | Background video container (when Background Option = Video). |
| Video file | `.sw-image-text__video-file` | HTML5 video element. |
| Embed container | `.sw-image-text__embed`, `.oembed_container`, `.embed_container` | External video embeds. |

**Breakpoints:** XL 1200px+; Desktop (LG) 992–1199px; Tablet (MD) 768–991px; Mobile (SM) ≤767px.

---

## Document Version

- **Module reference:** SW Image & Text (smithworks-2025).  
- **Doc last updated:** 2026-02-18.  
- **2026-02-18:** Image group (collapsed); Content Area Settings (text alignment per breakpoint); Content Colors; content style default Large (text balanced).  
- **2026-02-16:** Content style option (Default, Large balanced, Large full-width, Small, Blockquote) below Content Area.  
- **2026-02-04:** Video overlay/base and playback toggles moved to Style tab. Module Background Video (Content) now only: Video Type, source fields, Poster. Added spacing note (no default 25px when not set).  
- **2026-02-03:** Initial AI documentation. Intent: simple image and/or text module; no heading or button repeaters. Covers 4-tier responsive image, per-breakpoint alignment, Content Area (blank = hide), Module Settings, Module Background Settings, Module Background Video.  
- When the module changes materially, this doc is updated; re-download to keep your AI agent current.

**⚠️ Developer Note:** When updating this file, sync to `SW AI Documentation.html`. See `docs/PROCESS-MODULE-DOCUMENTATION-SYNC.md`.