# SW Body + Inset — AI Agent Reference **Primary purpose: Section module with body copy that wraps around an optional inset “card.”** Use when you want a **floated inset** (left or right) so body text wraps beside and under the card — **not** equal-height two-column grid layout. **Capability summary (AI):** “Heading repeater + body rich text + optional inset card (subheadings, 4-tier image, rich text, buttons). True CSS float wrap; vertical align top/middle/bottom; width cascade XL → Desktop/Tablet Inherit; 12 cols = stack; outer/inner Style like CTA Simple Bar / Pillar (no height controls).” **Looking for equal-height side-by-side columns (image/video/content/form)?** Use **SW Pillar Section**. **Looking for a simple stacked image/video above text?** Use **SW Text and Media** (preferred for new stacked content). **Don’t use SW Body + Inset when:** You need rigid two columns of equal height, a secondary form/video column, or bullet-list structure as a first-class layout concern — use **SW Pillar Section**. --- **Module name:** SW Body + Inset **SW Category:** Sections **Use this document when:** The user asks about the SW Body + Inset HubSpot module—what it does, how the float wrap works, inset width/order/vertical align, inset card content, outer/inner Style, or when to choose it vs Pillar / Text and Media. --- ## 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`**. 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 SW Body + Inset (or other Smithworks modules): - **Contact:** [smithworks.marketing/contact](https://smithworks.marketing/contact) --- ## HubSpot video and file uploads (plans and limits) This module supports **module background video** (Style → Module Background Settings → Module Inner Background Options = **Video**; source under Content → **Module Background Video**). It does **not** offer a foreground/inset video column like Pillar. - **HubSpot Video** (Marketing video library): Typically requires HubSpot subscription features for hosted video. - **Video from files**: File Manager limits (often **~20 MB** per file on lighter hubs) — compress, reduce resolution, or use **External embed**. - **External embed**: Paste a supported URL (YouTube, Vimeo, etc.). Verify current HubSpot limits for your portal in HubSpot’s help center. --- ## 1. Purpose and When to Use The **SW Body + Inset** module provides: - **Section headings** — Optional **Headings** repeater (State 3) above the flow. - **Body Content Area** — Rich text that fills the remaining space and **wraps around** the inset when floated. - **Optional inset card** — Toggle **Show Inset**. When on: **Inset Subheadings**, **Inset Image** (4-tier XL/Desktop/Tablet/Mobile), **Inset Content** rich text, and **Buttons** (repeater) with **Button Layout** (inline/stacked) and **Button Alignment**. - **True float wrap** — Not equal-height columns. Short inset → body continues full-width underneath. Outer float edge is flush; gap applies on the inner edge only. - **Vertical align** — Top / Middle / Bottom while floated. Middle and Bottom use padding-top + `shape-outside` (JS adjusts) so copy can fill **above** the card as well as beside/below. - **Width cascade** — **XL Inset Width** (default **4** cols / ~33%); **Desktop** and **Tablet** can **Inherit** or override; **12 cols = stacked** full width. Mobile always stacks; **Mobile Inset Position** chooses inset on top or bottom. - **Outer / inner Style** — Same family as **SW CTA Simple Bar** / **SW Pillar Section**: Module Outer Spacing, Max Module Outer Width, Module Inner Spacing, Max Module Inner Width, Module Outer/Inner backgrounds and borders. **No module height controls** on this module. - **Trailing margin cleanup** — Last-child margin is zeroed on body and inset content blocks so spacing stays consistent. **Use for:** Editorial sections where a callout card, tip box, photo + caption, or CTA card should float in the body; pull-quote style cards; feature callouts that should not leave an empty sidebar column when the card is shorter than the copy. --- ## 1b. Use Cases **Capabilities:** Float inset L/R with text wrap; stack at width 12 or on mobile; middle/bottom vertical align with wrap-above; theme/custom inset card styles; section outer/inner backgrounds. **Use for:** Any number of section instances. Works on short or long pages. **When to choose SW Pillar Section instead:** - You need **equal-height** two columns, or media/content/form as a **secondary column**. - You need **bullets** as a first-class list setting, dual content columns, or **alternating** left/right media bands across many instances in a pillar-page pattern. - You need **video in the secondary column** (not only module background video). **When to choose SW Text and Media instead:** - You need a **stacked** band (media above text) with optional headings and buttons under copy — no float wrap. **When to choose SW Cards instead:** - You need a **grid/slider of cards**, not one body + one inset. **Do NOT say:** “Same as Pillar two-column,” “equal height columns,” or “use this for forms beside content.” --- ## 1c. Related Modules | Module | Relationship | |--------|--------------| | **SW Pillar Section** | Equal-height side-by-side columns (image/video/content/form). Use for rigid two-column layouts and pillar pages. | | **SW Text and Media** | Stacked headings + foreground image/video + body + optional buttons. Prefer for new stacked bands. | | **SW Image & Text** | Legacy minimal stacked image + text. Prefer Text and Media for new content. | | **SW CTA Simple Bar** | In-page CTA band (icon + message + buttons). Shares outer/inner Style pattern; different layout job. | | **SW Cards** | Card grid/slider — not body + single inset float. | --- ## 2. Module Structure (What You See on the Page) From top to bottom: 1. **Optional Module Outer band** — Style → Module Background Settings → **Module Outer Background Options** (and outer borders). **Max Module Outer Width** under Module Settings. 2. **Inner section** — **Max Module Inner Width**, **Module Inner Spacing**, optional **Module Inner Background Options** / borders / background video. 3. **Headings** (optional) — Content → **Headings** repeater (above the float flow). 4. **Flow row** — When **Show Inset** is on: - **Floated inset card** (left or right per Inset Position): subheadings, optional image, inset rich text, buttons. - **Body Content Area** — wraps around the float; continues under a short Top-aligned inset. 5. When **Show Inset** is off — headings + body only (full width). **Breakpoints:** XL ≥1200px; Desktop (LG) 992–1199px; Tablet (MD) 768–991px; Mobile (SM) ≤767px. Mobile always stacks. --- ## 3. Configuration Reference The module has **Content** and **Style** tabs. Group and field names below match the HubSpot editor. HubL / API-ish paths are in parentheses for maintainers. ### 3.1 Content Tab **Enable Module** (`enable_module`) — When ON, the module renders. When OFF, outputs nothing. Default: ON. **Custom ID** (`custom_id`) — Optional. Replaces the default HTML `id` on the module wrapper. **Custom Classes** (`custom_classes`) — Optional. Extra CSS classes on the module wrapper. --- **Headings** (`heading_items`) — State 3 repeater above the body/inset flow. Per item: **Heading** (`heading_text`), **Size** (`heading_size`), **Display Size** (`heading_display_size`), **Color** / **Custom Color**, **Align**, tablet/mobile alignment and display-size overrides, **Apply Text Shadow** / shadow fields, **Override Padding** / **Padding Top (px)** / **Padding Bottom (px)**, **CSS Class**. --- **Content Area** (`body_rich_text`) — Body rich text. Leave blank to hide the text block. This is the copy that wraps around the inset. **Content style** (`content_style`) — Typography for the body: **Default**, **Large (text balanced)**, **Large (text full-width)**, **Small**, **Blockquote**. Default: Default. --- **Show Inset** (`show_inset`) — Toggle. When OFF, hide the inset card (body only). Default: ON. All inset content/style groups that depend on this are hidden when OFF. --- **Inset Subheadings** (`inset_heading_items`) — Heading repeater inside the inset card (same State 3 field pattern as section Headings). Visible when Show Inset is on. **Inset Image** (`inset_image_group`) — 4-tier responsive image: - **XL Image** (`image_xl`) + **Image alignment (XL)** - **Override Desktop Image** → **Desktop Image** + alignment - **Override Tablet Image** → **Tablet Image** + alignment - **Override Mobile Image** → **Mobile Image** + alignment **Inset Content** (`inset_rich_text`) — Rich text inside the inset card. **Buttons** (`inset_cta_button_items`) — Repeater (SW Button pattern). Per button: **Button Text**, **Button Link**, **Button Style**, **Button Size**, **Add Icon** / **Icon** (picker, Position, Purpose). **Default Button Link URL:** `https://smithworks.marketing/sw-module-documentation` *(Note: many older SW modules still default CTA links to a legacy `hubspot-development` URL. This module ships the project documentation URL above — document and use what the module actually defaults to.)* **Button Layout** (`inset_cta_buttons_layout`) — **Inline** or **Stacked** (default: Stacked). **Button Alignment** (`inset_cta_alignment`) — **Left**, **Center**, or **Right** (default: Left). --- **Module Background Video** (`background_video_settings`) — Visible when Style → Module Inner Background Options = **Video**. **Video Type** (HubSpot Video / Video from files / External Embed), source fields, poster. Overlay / base / playback toggles live under Style when Video is selected. Outer layer does **not** support video. --- ### 3.2 Style Tab Style group order (collapsed groups): **Module Settings** → **Module Background Settings** → **Content Colors** → **Inset Width** → **Inset Settings** → **Inset Card Styles** → **Headings**. --- **Module Settings** (`styles.module_settings`) — **No height / min-height fields** on this module. - **Module Outer Spacing** (`spacing`) — Default padding ~56px top/bottom (margin 0). - **Max Module Outer Width** (`outer_background_width`) — Full / Default / Small / Large / Custom (+ custom px). - **Module Inner Spacing** (`inner_spacing`) — Default padding ~25px all sides. - **Max Module Inner Width** (`max_module_width`) — Default / Small / Large / Full Width / Custom (+ custom px). --- **Module Background Settings** (`styles.module_background_settings`) — Outer / inner model (CTA Simple Bar / Pillar family): - **Module Outer Background Options** (`outer_background_option`) — None, Theme Color, Custom Color, Gradient, Image, Divider (no video on outer). - Outer image groups, theme/custom/gradient/divider fields as labeled. - **Module Outer Border Style** / **Position** / **Weight (px)** / **Color**. - **Module Inner Background Options** (`background_option`) — None, Theme Color, Custom Color, Gradient, Image, Video. - **Override Module Inner Border** (`inner_border_override`, default **off**) — when on: inner border style/weight/color/radius. --- **Content Colors** (`styles.content_colors`) — **Content Area:** **Text Color** (`text_color`), **Custom Text Color**, **Link Colors** (`link_context`). **Inset Content** subgroup (`inset_content_colors`): same trio for inset rich text/links (aliases from former `styles.inset_styles.inset_*`). Does not color inset headings. --- **Inset Width** (`styles.inset_width_setting`) — Visible when Show Inset is on. - **XL Inset Width** (`inset_cols_xl`) — 3–9 cols or **12 cols (stacked)**. **Default: 4 cols (33%)**. - **Desktop Inset Width** (`inset_cols_lg`) — **Inherit** or 3–8 / 12 stacked (992–1199px). - **Tablet Inset Width** (`inset_cols_md`) — **Inherit** or 3–8 / 12 stacked (768–991px). Cascade: Desktop Inherit → XL; Tablet Inherit → Desktop (or XL if Desktop is Inherit). **12 = stack** full width at that breakpoint. --- **Inset Settings** (`styles.inset_settings`) — Visible when Show Inset is on. - **XL Inset Position** (`xl_inset_position`) — Inset on Left/Top or Right/Bottom (default: Right/Bottom). - **Desktop Inset Position** / **Tablet Inset Position** — Inherit or Left/Top / Right/Bottom. - **Mobile Inset Position** (`mobile_inset_position`) — Inset on Top or Bottom when stacked (default: Bottom). - **Inset Vertical Align** (`inset_vertical_align`) — Top / Middle / Bottom (default: Top). Middle/Bottom offset the float so body can wrap above the card. - **Gap Beside Inset (px)** (`inset_gap`) — Space on the **inner** edge between inset and body (default 24). Outer float edge stays flush (0). --- **Inset Card Styles** (`styles.inset_styles`) — Visible when Show Inset is on. Card chrome only (spacing, background, border, radius). Text/link colors live under **Content Colors → Inset Content**. - **Inset Spacing** (`inset_spacing`) — Padding inside the card (default 24px). - **Inset Background** (`inset_background_option`) — None / Theme Color / Custom Color. - **Theme Color** / **Custom Color** as applicable. - **Inset Border Style** / **Width** / **Color**. - **Override Inset Border Radius** — when off, uses theme global border radius; when on: **Inset Border Radius (px)**. - **Inset Text Color** / **Custom Inset Text Color**. - **Inset Link Colors** — Theme Defaults / On Dark / On Light. --- **Headings** (`styles.heading_settings`) — **Heading text wrap** (`heading_text_wrap`): **Balance** or **Auto** (default: **Auto**). --- ## 4. Common Tasks ("How Do I…") ### Float the inset on the left **Style** → **Inset Settings** → **XL Inset Position** = **Inset on Left/Top**. Use Desktop/Tablet Inherit or override per breakpoint. ### Float the inset on the right **Style** → **Inset Settings** → **XL Inset Position** = **Inset on Right/Bottom** (default). ### Make body text wrap under a short inset Keep **Inset Vertical Align** = **Top** and enough body paragraphs. That is the classic float: beside, then full-width under. ### Put the inset lower so copy fills above it **Style** → **Inset Settings** → **Inset Vertical Align** = **Middle** or **Bottom**. Middle/Bottom use JS-assisted padding-top + shape-outside so text can wrap above, beside, and (for Middle) below. ### Change inset width **Style** → **Inset Width** → **XL Inset Width** (default 4). Set Desktop/Tablet to **Inherit** or an explicit column count. Set **12 cols (stacked)** to force full-width stack at that breakpoint. ### Stack inset above/below body on mobile **Style** → **Inset Settings** → **Mobile Inset Position** = **Inset on Top** or **Inset on Bottom**. ### Hide the inset (body only) **Content** → **Show Inset** = OFF. ### Edit inset card content **Content** → **Inset Subheadings**, **Inset Image**, **Inset Content**, **Buttons**. ### Add or edit inset buttons **Content** → **Buttons**. Set text, link, style, size, optional icon. **Button Layout** = Inline or Stacked; **Button Alignment** = Left/Center/Right. Default link: `https://smithworks.marketing/sw-module-documentation`. ### Change inset card look (background, border, radius) **Style** → **Inset Card Styles**. ### Change section outer/inner background or borders **Style** → **Module Background Settings** (outer then inner). For video background: Inner = Video, then **Content** → **Module Background Video**. ### Change body text color / link contrast **Style** → **Content Colors**. ### Change spacing or max width **Style** → **Module Settings** → Module Outer Spacing / Max Module Outer Width / Module Inner Spacing / Max Module Inner Width. ### Add custom ID or CSS class **Content** → **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. - You need to target a **specific instance** (via **Custom ID** or **Custom Classes**). **Where to add it:** Theme **`custom-styles.css`** (typical for Sprocket Rocket–based themes). **How to target:** Use classes in the Appendix. Confirm with DevTools if needed. --- ## 6. Appendix: CSS Classes and Selectors Module wrapper also has `smithworks-module` plus any **Custom Classes**. | Element | Class(es) | Notes | |--------|-----------|--------| | Module section | `.sw-body-inset` | Plus modifiers e.g. `.sw-body-inset--over-outer` when outer band is active. | | Inner max-width container | `.sw-body-inset__container` | Border/radius/inner background layer. | | Inner spacing shell | `.sw-body-inset__inner` | Module Inner Spacing. | | Headings block | `.sw-body-inset__headings`, `.sw-body-inset__heading` | Section headings. | | Float flow | `.sw-body-inset__flow` | Data attrs for width/side/stack/valign. | | Float carrier | `.sw-body-inset__float` | Floated box. | | Inset card | `.sw-body-inset__inset` | Card chrome. | | Inset image | `.sw-body-inset__inset-image` | | | Inset rich text | `.sw-body-inset__inset-content` | Last-child margin zeroed. | | Body rich text | `.sw-body-inset__body` | Last-child margin zeroed. | | Inset CTAs | `.sw-body-inset__inset-cta` | Modifiers `--inline` / `--stacked`, `--align-left` / `--center` / `--right`. | | Module Outer | `.sw-body-inset__module-outer-root`, `.sw-body-inset__module-outer-bg`, `.sw-body-inset__module-outer-inner`, etc. | Shared `smithworks-module-outer-*` classes too. | | Background video wrap | `.sw-body-inset__video-wrap`, `.sw-body-inset__video-file`, `.sw-body-inset__video-embed` | When inner background = video. | **Data attributes (on `.sw-body-inset__flow`):** `data-show-inset`, `data-w-xl` / `data-w-lg` / `data-w-md`, `data-side-xl` / `data-side-lg` / `data-side-md`, `data-stack-order`, `data-valign`, gap-related CSS variables as emitted by the module. **Outer instance:** `data-bi-outer-instance` on the outer root. **Breakpoints:** XL ≥1200px; Desktop 992–1199px; Tablet 768–991px; Mobile ≤767px. --- ## 7. Fields used (maintainer map) From `module.html` / `fields.json` (shipping reference): - `enable_module`, `custom_id`, `custom_classes` - `heading_items` (State 3), `body_rich_text`, `content_style` - `show_inset`, `inset_heading_items`, `inset_image_group`, `inset_rich_text` - `inset_cta_button_items`, `inset_cta_buttons_layout`, `inset_cta_alignment` - `styles.module_settings` (outer/inner spacing + widths; **no heights**) - `styles.module_background_settings` (`outer_*` + inner; `inner_border_override` default false) - `styles.content_colors` - `styles.inset_width_setting` (XL / Desktop / Tablet) - `styles.inset_settings` (order + valign + gap) - `styles.content_colors.inset_content_colors` (inset text/link colors) - `styles.inset_styles` (card chrome only) - `styles.heading_settings` (`heading_text_wrap` default auto) - `background_video_settings` --- ## Document Version - **Module reference:** SW Body + Inset (smithworks-2025 / sw-master). - **Master version number (shipping):** **2026.07.30.19.25**. - **Doc last updated:** 2026-07-30. - **2026-07-30 (Master 2026.07.30.19.25):** Initial AI documentation. Float-wrap section module; inset card content; width/order/valign; outer/inner Style (no heights); default CTA URL `https://smithworks.marketing/sw-module-documentation`; related modules vs Pillar / Text and Media. - 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`. ## Shipped notes - **2026.07.30.21.35:** Content Colors Inset Content; Inset Position labels; inset heading visibility fix; default CTA hubspot-development.