# SW Pillar Section — AI Agent Reference

**Primary purpose: Side-by-side layout module.** Use this module when the image/video needs to sit **BESIDE** content on desktop (left or right). Also supports pillar structure behaviors (anchors, consistent pillar spacing).

**Capability summary (AI):** "This module supports a two-column side-by-side layout: media left or right beside content, intended for pillar sections."

**Looking for a simple stacked image above text?** Use **SW Image & Text**.

**Don't use SW Pillar Section when:** You only need a simple stacked image + paragraph and don't need pillar structure, headings, bullets, or CTAs—use SW Image & Text instead.

---

**Module name:** SW Pillar Section  
**Use this document when:** The user asks about the SW Pillar Section HubSpot module—what it does, how to configure it, or how to change a specific element (layout, images, video, content, bullets, CTAs, spacing, dividers, etc.).

---

## 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. Tell them to add their overrides there. 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 Pillar Section (or other Smithworks modules):

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

---

## 1. Purpose and When to Use

The **SW Pillar Section** module provides:

- **Two-column layouts:** One side is the **primary content** (headings, bullets, rich text, CTAs); the other side can be **Image**, **Video**, **Content** (a second content block), **Form** (HubSpot form), or **None** (full-width primary content).
- **Headings above the pillar** — Optional headings above both columns.
- **Primary content column:** Headings (above content), Bullets (numbered, bullet, custom icon, or custom image), Content Area (rich text), Override Text Color, and CTA Buttons (up to two, with icon support and alignment overrides).
- **Secondary column options:** Image (with breakpoint overrides and image-as-background), Video (HubSpot, file, or embed), Content (mirrors primary content structure), or Form (HubSpot form with Form Box Settings).
- **Layout controls:** Desktop/Tablet/Mobile column order, column widths (Desktop/Tablet; Mobile always stacked), vertical alignment (top/middle/bottom).
- **Module settings:** Spacing, Max Module Width, XL/LG/MD/SM height cascade with overrides, Column Vertical Alignment, Bottom Divider.
- **Shared settings:** List Setting (list type, icon, spacing) and Content Area Setting (text alignment) apply to both content columns.

Use it for **image+text sections**, **video+text**, **two content columns**, or **full-width content** with optional media.

---

## 1b. Use Cases

**Capabilities:** Image or video beside content; headings, bullets, rich text, CTAs; image left or right per instance; add multiple instances for alternating layout.

**Use for:** Any number of sections (1, 2, or many). Works on short pages, long pages, and everything in between. Common on pillar-style pages but **not limited to them**.

**Alternating pattern:** Add multiple SW Pillar Section modules. Set Desktop Column Order = "Secondary on Left" on one instance, "Secondary on Right" on the next. Repeat for alternating image left/right.

**Structure:** One section per module instance (no repeater). Add more instances for more sections.

**When to choose SW Image & Text instead:** When you need only simple image + rich text, with no headings, bullets, or CTAs. SW Image & Text is simpler.

**When to choose SW Pillar Accordion instead:** When you need accordion panels with an image that changes per panel (FAQs, feature overviews). SW Pillar Accordion is accordion-based; SW Pillar Section is section-based.

**Do NOT say:** "For long pages only," "you wouldn't use it for 1–2 blocks," "for pillar pages only."

---

## 1c. Related Modules

| Module | Relationship |
|--------|--------------|
| **SW Image & Text** | Simpler; image + rich text only. No headings, bullets, CTAs. Choose when you don't need structured content. |
| **SW Form** | Use when form only (nothing beside it). Pillar Section with Secondary Column = Form when form needs to sit beside image/video/content. |
| **SW Pillar Accordion** | Accordion with image per panel. Different layout—accordion, not sections. |
| **SW Cards** | Generic card repeater for non-blog content. Different structure—cards, not image+content sections. |

---

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

From top to bottom:

1. **Headings (above pillar)** — Optional headings above both columns, from **Headings (above pillar)** repeater.
2. **Main row** — Two columns (or one full-width when Secondary Column = None):
   - **Primary column:** Headings (above content), Bullets, Content Area, CTA Buttons.
   - **Secondary column:** Image, Video, or Content (headings, bullets, rich text, CTAs)—depending on **Secondary Column** choice.
3. **Bottom Divider** — Optional line at bottom of module (Style tab → Module Settings).

Breakpoints: **Desktop** ≥992px; **Tablet** 768–991px; **Mobile** ≤767px. Mobile always stacks (secondary on top or bottom based on Mobile Column Order).

---

## 3. Configuration Reference

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

### 3.1 Content Tab

**Enable Module** (toggle) — When ON, the module renders. When OFF, the module outputs nothing. Use to keep the module in the page flow but hide it from view. Default: ON.

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

**Custom Classes** — Optional. Extra CSS classes on the module wrapper.

---

**Headings (above pillar)** (repeater)  
- **Where:** Content tab.  
- **What:** Headings above both columns. Per heading: **Heading**, **Size**, **Display Size**, **Color**, **Custom Color** (when Color = Custom), **Align** (desktop 992px+), **Override Text Alignment (Tablet)** / **Text Alignment (Tablet)** (768–991px), **Override Text Alignment (Mobile)** / **Text Alignment (Mobile)** (≤767px), **Override Tablet Display Size** / **Tablet Display Size**, **Override Mobile Display Size** / **Mobile Display Size**, **Override Padding** / **Padding Top (px)** / **Padding Bottom (px)**, **CSS Class**.

---

**Content Area Group**  
- **Where:** Content tab.  
- **What:** Primary content column.

**Headings (above content)** (repeater) — Headings above bullets and content. Same structure as Headings (above pillar), including responsive alignment and display size overrides, padding, and CSS class.

**Bullets** (repeater) — List items. Per item: **Item Text**, **Override bullet** (on: **Item bullet type** = Icon or Image; Icon group with Icon, Purpose, Item icon color; or **Item image** when Image).

**Content Area** — Rich text.

**Override Text Color** — Color picker for content area text.

**CTA Buttons** — **Button Alignment**, **Override Tablet Alignment** / **Tablet Button Alignment**, **Override Mobile Alignment** / **Mobile Button Alignment**. **Add Button 1** / **Add Button 2** with **Button X Text**, **Button X Link**, **Button X Style**, **Add Icon**, **Icon** (picker, Position, Purpose).

---

**Secondary Column**  
- **Where:** Content tab.  
- **What:** Choice: **Image**, **Video**, **Content**, or **None (full width)**.

---

**Secondary Column (Image)** (visible when Secondary Column = Image)  
- **Where:** Content tab.  
- **What:** **Extra Large Desktop Image** (default: pillar-section-placeholder.jpg), **Override Desktop Image** / **Desktop Image**, **Override Tablet Image** / **Tablet Image**, **Override Mobile Image** / **Mobile Image**. When no image is selected, a placeholder image is shown. **Image as Background** toggle. When Image as Background: **Extra Large Desktop Background Position**, **Desktop/Tablet/Mobile Background Position** (per override). **Override Media Border Radius** / **Image Corner Radius** (when Image; images only).

---

**Secondary Column (Video)** (visible when Secondary Column = Video)  
- **Where:** Content tab.  
- **What:** **Video Type** (HubSpot Video, Video from files, External Embed). **HubSpot Video**, **Video File**, or **Embed Field** depending on type. **Video Poster** (optional). Video corner radius: Style tab → Secondary Column Settings → **Override Media Border Radius** / **Video Corner Radius**.

---

**Secondary Column (Content)** (visible when Secondary Column = Content)  
- **Where:** Content tab.  
- **What:** Same structure as Content Area Group—Headings (above content) with same structure as primary (including responsive alignment and display size overrides, padding, CSS class), Bullets, Content Area, Override Text Color, CTA Buttons. Uses same List Setting and Content Area Setting as primary.

---

### 3.2 Style Tab

**Module Settings** (collapsed by default)  
- **Where:** Style tab.  
- **What:** **Spacing** (margin/padding). Default: margin 0px top/bottom; padding 50px top/bottom, 25px left/right. **Max Module Width** (Default, Small, Large, Full Width, Custom). When Custom: **Max Module Width (px)**. **XL Module Height** (1200px+): **Minimum Height** (Default / Custom Height / Full Screen), **Height (px)** when Custom, **Vertical Alignment**. **Override Desktop Height** (992–1199px), **Override Tablet Height** (768–991px), **Override Mobile Height** (≤767px): each has **Override** toggle, then **Minimum Height**, **Height (px)**, **Vertical Alignment**. **Column Vertical Alignment** (Top, Middle, Bottom). **Bottom Divider** (No Divider / Bottom Divider). When Bottom Divider: **Divider Thickness**, **Divider Width (%)**, **Divider Color**, **Divider Line Style**.

---

**Column Width Settings** (visible when Secondary Column = Image, Video, or Content)  
- **Where:** Style tab.  
- **What:** **Desktop Column Width** (secondary: 3–9 cols or 12 stacked). **Desktop Column Order** (Secondary on Left/Top, Secondary on Right/Bottom). **Tablet Column Width** (Inherit or 3–9 cols, 12 stacked). **Tablet Column Order**. **Mobile Column Order** (Secondary on Top/Bottom). Mobile always 12 cols stacked.

---

**Secondary Column (Media) Setting** (visible when Secondary Column = Image or Video)  
- **Where:** Style tab.  
- **What:** **Desktop Column Order** (Secondary on Left, Secondary on Right). **Tablet Column Order** (Inherit or override). **Mobile Column Order** (Secondary on Top, Secondary on Bottom). Defaults: Desktop = Secondary on Right/Bottom; Tablet = Inherit; Mobile = Secondary on Bottom. **Override Media Border Radius** (toggle) — When ON, use custom corner radius; when OFF, use global theme border radius. Applies to both image and video. When Image: **Image as Background**, **Image Corner Radius** (visible when Override on). When Video: **Video Corner Radius** (visible when Override on).

---

**Content Area Setting**  
- **Where:** Style tab.  
- **What:** **Text Alignment** (Left, Center, Right) for content areas. **Override Tablet Text Alignment** / **Tablet Text Alignment**. **Override Mobile Text Alignment** / **Mobile Text Alignment**.

---

**List Setting**  
- **Where:** Style tab.  
- **What:** **List Type** (Numbered, Bullet, Custom Icon, Custom Image). When Custom Icon: **Default Bullet Icon**, **Icon Purpose**, **Default Bullet Icon Color**. When Custom Image: **Default Bullet Image**. **Bullet List Font Size**, **List Item Bottom Spacing**, **List Left Padding**, **Space Between Icon and Text**.

---

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

### Change headings above the pillar  
**Content** tab → **Headings (above pillar)**. Edit **Heading**, **Size**, **Display Size**, **Color**, **Align** per item. Use **Override Text Alignment (Tablet/Mobile)** and **Override Tablet/Mobile Display Size** for breakpoint-specific alignment and size.

### Change the main content heading  
**Content** tab → **Content Area Group** → **Headings (above content)**. Edit per item. Use **Override Text Alignment (Tablet/Mobile)** and **Override Tablet/Mobile Display Size** for breakpoint-specific alignment and size.

### Change bullet list items  
**Content** tab → **Content Area Group** → **Bullets**. Edit **Item Text**. Use **Override bullet** for custom icon/image per item.

### Change list type (numbered, bullet, custom icon/image)  
**Style** tab → **List Setting** → **List Type**.

### Change the content area text  
**Content** tab → **Content Area Group** → **Content Area**. Rich text editor.

### Change content area text color  
**Content** tab → **Content Area Group** → **Override Text Color**.

### Add or edit CTA buttons (primary column)  
**Content** tab → **Content Area Group** → **CTA Buttons**. **Add Button 1** / **Add Button 2**. Set **Button X Text**, **Button X Link**, **Button X Style**. Use **Add Icon** and **Icon** for icon. **Button Alignment** and overrides for Tablet/Mobile.

### Switch secondary column to image, video, content, or none  
**Content** tab → **Secondary Column**. Choose Image, Video, Content, or None (full width).

### Change the secondary image  
**Content** tab → **Secondary Column (Image)**. Use **Extra Large Desktop Image** or **Override Desktop/Tablet/Mobile Image** for breakpoint-specific images.

### Use image as background (full-bleed)  
**Content** tab → **Secondary Column (Image)** → **Image as Background** (toggle). Adjust **Background Position** per breakpoint if overrides are on.

### Change video (HubSpot, file, or embed)  
**Content** tab → **Secondary Column (Video)** → **Video Type**. Then **HubSpot Video**, **Video File**, or **Embed Field**.

### Change column order (desktop: image left or right)  
**Style** tab → **Secondary Column (Media) Setting** (when Image/Video) or **Column Width Settings** → **Desktop Column Order**.

### Change column order on mobile (media on top or bottom)  
**Style** tab → **Secondary Column (Media) Setting** or **Column Width Settings** → **Mobile Column Order**.

### Change secondary column width (desktop/tablet)  
**Style** tab → **Column Width Settings** → **Desktop Column Width**, **Tablet Column Width**.

### Add or edit secondary content column  
**Content** tab → **Secondary Column** = Content. Then **Secondary Column (Content)** → same structure as primary (Headings, Bullets, Content Area, CTAs).

### Change vertical alignment of columns  
**Style** tab → **Module Settings** → **Column Vertical Alignment** (Top, Middle, Bottom).

### Change max module width  
**Style** tab → **Module Settings** → **Max Module Width** (Default, Small, Large, Full Width, Custom). When Custom: **Max Module Width (px)**.

### Change module height (min pixels or 100vh)  
**Style** tab → **Module Settings** → **XL Module Height** (Minimum Height, Height (px), Vertical Alignment). Use **Override Desktop/Tablet/Mobile Height** for breakpoint-specific height.

### Change spacing (margin/padding)  
**Style** tab → **Module Settings** → **Spacing**. Default: margin 0px top/bottom; padding 50px top/bottom, 25px left/right.

### Change image or video corner radius  
**Style** tab → **Secondary Column Settings** → **Override Media Border Radius** (toggle). When ON: **Image Corner Radius** (when Secondary Column = Image) or **Video Corner Radius** (when Secondary Column = Video). When OFF, uses global theme border radius.

### Add or change bottom divider  
**Style** tab → **Module Settings** → **Bottom Divider** (No Divider / Bottom Divider). When on: **Divider Thickness**, **Divider Width (%)**, **Divider Color**, **Divider Line Style**.

### Change content area text alignment  
**Style** tab → **Content Area Setting** → **Text Alignment**. Use **Override Tablet/Mobile Text Alignment** for breakpoint-specific alignment.

### Change custom icon for bullets  
**Style** tab → **List Setting** → **List Type** = Custom Icon. **Default Bullet Icon** (picker), **Icon Purpose**, **Default Bullet Icon Color**.

### Change default bullet image  
**Style** tab → **List Setting** → **List Type** = Custom Image. **Default Bullet Image**.

### Add custom 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. specific typography, spacing tweaks, layout overrides).
- 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. Inspect the page with browser DevTools if you need to confirm selectors or add more specific overrides (e.g. by **Custom ID** or **Custom Classes**).

---

## 6. Appendix: CSS Classes and Selectors

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

| Element | Class(es) | Notes |
|--------|-----------|--------|
| Module wrapper | `.sw-pillar`, `.sw-pillar-section` | Plus custom_classes if set. id = Custom ID if set. |
| Container | `.sw-pillar__container` | |
| Top headings | `.sw-pillar__top-headings`, `.sw-pillar__top-heading` | |
| Heading wrapper (alignment) | `.sw-pillar__heading-wrap` | Wraps each heading. Uses `--th-wrap-justify-default`, `--th-wrap-justify-md`, `--th-wrap-justify-sm` for responsive justification. |
| Main row | `.sw-pillar__row` | Grid; stacks on mobile. |
| Primary content column | `.sw-pillar__content` | |
| Secondary column (media or content) | `.sw-pillar__content-secondary` | |
| Content inner | `.sw-pillar__inner` | Wraps headings, list, content area, CTAs. |
| Headings above content | `.sw-pillar__headings`, `.sw-pillar__heading` | |
| Bullet list | `.sw-pillar__list` | `.sw-pillar__list--numbered`, `.sw-pillar__list--bullet`, `.sw-pillar__list--custom_icon`, `.sw-pillar__list--custom_image` |
| List item | `.sw-pillar__list-item` | |
| List icon | `.sw-pillar__list-icon`, `.sw-pillar__list-icon--fa`, `.sw-pillar__list-icon--img` | |
| List text | `.sw-pillar__list-text` | |
| Media (image/video) | `.sw-pillar__media` | |
| Image (inline) | `.sw-pillar__picture`, `.sw-pillar__img` | |
| Background image carrier | `.sw-pillar__bg` | When Image as Background. |
| Video embed | `.sw-pillar__video-embed` | |
| CTA area | `.sw-pillar__cta` | Uses data-cta-align, data-cta-md-align, data-cta-sm-align. |
| Bottom divider | `.has-bottom-divider` | On section when Bottom Divider enabled. |
| Single column | `.sw-pillar--single-column` | When Secondary Column = None. |
| Two columns | `.sw-pillar--two-columns` | When Image, Video, or Content. |

**Data attributes:** `data-pos`, `data-tablet-pos`, `data-mobile-pos` (image_left, image_right, image_top, image_bottom). `data-bg` (true/false). `data-vertical-align` (top, middle, bottom).

**Breakpoints:** Desktop ≥992px; Tablet 768–991px; Mobile ≤767px.

---

## Document Version

- **Module reference:** SW Pillar Section (smithworks-2025).  
- **Doc last updated:** 2026-02-24.  
- **2026-02-24:** Module Settings Spacing default: padding 50px top/bottom, 25px left/right; margin 0px. Override Media Border Radius for both image and video; Image Corner Radius (when image); Video Corner Radius (when video). Enable Module toggle (Content tab, first field); when OFF, module outputs nothing.
- **2026-02-14:** Image column default changed to pillar-section-placeholder.jpg.
- **2026-02-05:** Heading repeaters—responsive text alignment (Tablet/Mobile) and display size overrides; correct field order; padding and CSS class. Module Settings—Max Module Width; XL/LG/MD/SM height cascade with overrides; Column Vertical Alignment. Appendix—`.sw-pillar__heading-wrap` and CSS variables. Common Tasks—responsive heading controls, new height model, max width task. Pillar image placeholder note.  
- **2026-01-31:** Initial documentation. Covers secondary column (Image/Video/Content/None), column widths, two-content mode, Module Settings (spacing, divider, height, vertical alignment), List Setting (numbered/bullet/custom icon/custom image), Content Area Setting, CTA alignment overrides.  
- 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`.