# 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)

---

## 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** (the built-in videoplayer / Marketing video library): Typically requires **HubSpot subscription features** for hosted video. If the option is missing or blocked, confirm your **hub type and tier** in HubSpot's product and pricing documentation.
- **Video from files**: Uploads use the **File Manager**. On **Content Hub Free** and similar tiers, HubSpot commonly applies a **per-file upload size limit (often 20 MB)** and account storage limits. **Compress** the file, reduce resolution, or use **External embed** if upload fails or the file exceeds the limit.
- **External embed**: Paste a supported **URL** (for example YouTube or Vimeo). This path usually does not require HubSpot's hosted video product.

HubSpot's limits and SKUs change over time—**verify current rules for your portal** in HubSpot's help center.

## 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. **Optional outer band (Style → Module background → Module Outer Background Options)** — When enabled, an extra visual layer (color, gradient, image, or diagonal divider) can span the full content row behind the pillar while **Module Settings → Max Module Width** still narrows the two-column layout. The outer layer can also add **top and bottom borders** without requiring an outer fill.
2. **Headings (above pillar)** — Optional headings above both columns, from **Headings (above pillar)** repeater.
3. **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, Content (headings, bullets, rich text, CTAs), or Form (HubSpot form + optional resubmit cooldown)—depending on **Secondary Column** choice.
4. **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).

**Bullets placement** — **Above content area** (default) or **Below content area**. Controls whether the **Bullets** list appears before or after the **Content Area** rich text in this column. **Headings (above content)** always stay above both.

**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**, **Form** (HubSpot form in the secondary column), 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 **ON**, the image covers the **entire secondary column** on tablet/desktop (full-bleed within that column, not a small inset photo); when **OFF**, the image displays as a normal inline image in the column. When Image as Background is ON: **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, **Bullets placement** (independent from primary), Content Area, Override Text Color, CTA Buttons. Uses same List Setting and Content Area Setting as primary.

---

**Secondary Column (Form)** (visible when Secondary Column = Form)  
- **Where:** Content tab.  
- **What:** **Headings (above form)** (repeater, same heading pattern as other pillar headings). **Form** (HubSpot form picker). **Resubmit cooldown** (optional group, default off): **Enable resubmit cooldown**, **Cooldown (minutes)** (1–1440), **Message while waiting** (richtext), **Content style** (typography for the wait message), **Separate cooldown per module instance** (default **on**). Uses browser **localStorage** with a **Pillar-only** storage namespace (separate from standalone **SW Form**). Requires the form’s HubSpot **On submission** action to be **Show thank you message**; **redirect** after submit is **not** supported for this feature.  
- **Style tab:** **Form Box Settings** (when Form) — background, border radius, border, shadow, hide labels, field styling, button styling, form box padding (same idea as **SW Form**).

---

### 3.2 Style Tab

**Module background** (contains Module Outer + inner backgrounds)  
- **Where:** Style tab → **Positioning** → **Module background** (`module_background_settings`).  
- **Module Outer (top of group):** **Module Outer Background Options** and related fields (**`outer_*`**) — full-width **Theme Color / Custom Color / Gradient / Image**, or **Divider** (diagonal split). At the end of the outer field block: **Module Outer Border Style**, **Module Outer Border Weight (px)**, and **Module Outer Border Color** for matching **top and bottom borders** on the outer shell. **No video** on the outer layer (use **Module Inner Background Options** / inner section for background video).  
- **Module Inner:** **Module Inner Background Options** and inner fill / image / video — background for the **inner** pillar `<section>` behind the columns. At the bottom of the same group: **Module Inner Border Style**, **Module Inner Border Weight (px)**, and **Module Inner Border Color** for matching **top and bottom borders** on the inner layer.  
- **Outer vs inner width:** Use **Module Settings** → **Max Module Outer Width** with **Module Outer Background Options** so the outer band can read wider or narrower than the pillar; **Max Module Width** still caps the two-column layout.  
- **When to use vs a page section:** Use a **HubSpot section** when **several modules** should share one wrapper. Use **Module Outer** when **this instance** needs its own outer band (e.g. multi-stop gradient or the built-in divider). **Module Outer → Gradient** uses the theme gradient field for **more than two stops** where HubSpot section gradients are limited.

---

**Module Settings** (collapsed by default)  
- **Where:** Style tab.  
- **What:** **Module Outer Spacing** (margin/padding around the outer stack). **Max Module Outer Width** (and custom px when applicable). **Module Inner Spacing** (padding/margin on the inner pillar column). Default outer padding: margin 0px top/bottom; padding 50px top/bottom, 25px left/right (same comfortable defaults as before the **Spacing** rename). **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, Content, or Form)  
- **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 marker width override** (off by default) — when **on**, **Bullet marker width (px)** (8–128px, default 24) sets a fixed width for **square** icon/image markers (applies to the whole list; per-item overrides still use **Override bullet** on each row). **Bullet List Font Size**, **Disable text balancing** (default **on** — normal full-width line breaks when list uses heading/display sizes; turn **off** for short balanced lines), **List Item Bottom Spacing**, **List Left Padding**, **Space Between Icon and Text**.

---

**Form Box Settings** (visible when Secondary Column = Form)  
- **Where:** Style tab.  
- **What:** Form box background, **Override Border Radius**, border, **Override Shadow**, **Hide Field Labels**, **Field Styling** (Auto vs Custom — affects cooldown panel when cooldown is on), **Button Styling**, **Form Box Padding** (top/bottom/left/right).

---

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

### Add an outer background, borders, or diagonal divider behind the pillar (Module Outer)  
**Style** tab → **Module background** → **Module Outer Background Options** (None, Theme Color, Custom Color, Gradient, Image, or **Divider** for the built-in split). Set **Max Module Outer Width** under **Module Settings** so the outer band can be full row or constrained; use **Max Module Width** if the two-column content should stay narrower than the outer paint. **Divider** uses **left/right edge Y %** and top/bottom fill colors. To add **top and bottom borders** on the outer shell, use **Module Outer Border Style**, then set **Module Outer Border Weight (px)** and **Module Outer Border Color**. **No video** on Module Outer—use **Module Inner Background Options** / inner section for background video.

### Add top and bottom borders to the inner pillar layer  
**Style** tab → **Module background** → configure **Module Inner Background Options** as needed, then scroll to the bottom of the same group and set **Module Inner Border Style**. When the style is not **None**, set **Module Inner Border Weight (px)** and **Module Inner Border Color**. This adds matching top and bottom borders to the inner pillar layer only.

### 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 how heading-sized bullet lines wrap (balanced vs full width)  
**Style** tab → **List Setting** → **Disable text balancing**. Default **on**: long bullets use the full text column width when **Bullet List Font Size** is a heading or display size. Turn **off** if you want the shorter “balanced” line breaks the theme uses for headings.

### 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, form, or none  
**Content** tab → **Secondary Column**. Choose Image, Video, Content, Form, or None (full width).

### Configure the secondary column form (headings, form picker, form box)  
**Content** tab → **Secondary Column** = **Form**. **Secondary Column (Form)** → **Headings (above form)**, **Form**. **Style** tab → **Form Box Settings** for colors, border, field/button styling, padding.

### Limit repeat submissions after thank you (resubmit cooldown)  
**Content** tab → **Secondary Column (Form)** → **Resubmit cooldown** → **Enable resubmit cooldown**. Set minutes and message; **Content style** for the wait message. Confirm the HubSpot form uses **On submission → Show thank you message** (not redirect). **Separate cooldown per module instance** (default on) gives each Pillar instance its own timer. Storage is **Pillar-only** (not shared with standalone **SW Form**).

### 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). You can also set it under **Style** → **Secondary Column (Media) Setting** when Secondary Column = Image.

**What it does:** **OFF** (default) — the image is an **inline** picture in the media column; it respects column padding and **Image Corner Radius** like a normal photo. **ON** — the image is applied as a **background** on the secondary column: on **tablet and desktop** it **fills the full height and width** of that column (edge-to-edge within the column), using **object-fit: cover** so it crops rather than letterboxes. Use **Extra Large Desktop Background Position** and **Desktop/Tablet/Mobile Background Position** (when overrides are on) to control which part of the image stays visible. On **mobile**, layout still stacks; background mode still applies in the stacked media block—set **Mobile Column Order** if you need the image block above or below the text.

### 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, content, or form) | `.sw-pillar__content-secondary` | Form column also uses `.sw-pillar__form-column`. |
| Form column wrapper | `.sw-pillar__form-column` | When Secondary Column = Form. |
| Form resubmit cooldown (when enabled) | `.sw-pillar__form-cooldown-root`, `.sw-pillar__form-resubmit-box`, `.sw-pillar__form-resubmit-message`, `.sw-pillar__form-resubmit-panel` | Pillar-scoped; not SW Form classes. |
| 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`; when **Disable text balancing** is on: `.sw-pillar__list--no-text-balance` |
| 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. |
| Module Outer (optional band) | `.sw-pillar__module-outer-root`, `.smithworks-module-outer-root`, `.sw-pillar__module-outer-bg`, `.smithworks-module-outer-bg`, `.sw-pillar__module-outer-bg-backdrop`, `.sw-pillar__module-outer-bg-fill`, `.sw-pillar__module-outer`, `.smithworks-module-outer-inner`, `.sw-pillar__module-outer--width-constrained`, `.sw-pillar__module-outer-root--full-bleed` | Root holds `data-pillar-outer-instance` and optional `--outer-max-width`. Divider uses `.sw-pillar__module-outer-divider-svg`. |
| 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, Content, or Form. |

**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). `data-pillar-outer-instance` on the outer root when Module Outer is present.

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

---

## Document Version

- **Module reference:** SW Pillar Section (smithworks-2025).  
- **Doc last updated:** 2026-05-11.  
- **2026-05-11 (Master 2026.05.11.15.23):** **Module background** adds matching **top and bottom border** controls to both layers: **Module Outer Border Style / Weight (px) / Color** and **Module Inner Border Style / Weight (px) / Color**. The outer border controls now sit at the **end of the Module Outer field block**, immediately before **Module Inner Background Options**. The **Module Outer Background Options** choice labels were also shortened to plain labels (for example **Theme Color**, **Custom Color**) without repeating **`Module Outer:`**. Synced **`SW AI Documentation.html`**, SW Module FAQs, public changelog, and the local changelog preview mirror.  
- **2026-05-07 (Master 2026.05.07.17.28):** **Style tab field reorg** — **Module Outer** controls live under **Module background** (**Module Outer Background Options**, **`outer_*`**); **Module Settings** includes **Module Outer Spacing**, **Max Module Outer Width**, **Module Inner Spacing**; inner fill labeled **Module Inner Background Options**. **List Settings** — optional **bullet marker width** override + px slider for square markers. Synced **`SW AI Documentation.html`**, SW Module FAQs, public changelog; registry **`docs/alias-mapping-risks.json`**.  
- **2026-05-06 (Master 2026.05.06.22.12):** **Content → Bullets placement** — per column (**Primary Column (Content)** and **Secondary Column (Content)**): bullets **above** or **below** the **Content Area**; headings stay above both.  
- **2026-04-16 (Master 2026.04.16.18.24):** **Module Outer** — optional outer band (color, gradient, image, diagonal divider); outer width vs inner **Max Module Width**; when to use vs a page section; appendix classes + `data-pillar-outer-instance` *(sidebar group paths updated at **2026.05.07.17.28** — behavior unchanged).*  
- **2026-04-02 (Master 2026.04.02.11.34):** **Secondary Column (Form)** — **Resubmit cooldown** (optional; Pillar-only localStorage; inline thank you only; per-instance default on). Configuration Reference + Common Tasks + appendix classes. Cross-reference **SW Form** for standalone form behavior.
- **2026-03-25:** **Image as Background** — clarified inline vs full-bleed behavior (secondary column fills on tablet/desktop; object-fit cover; Content and Style tab locations; background position fields). SW Module FAQs: matching short FAQ for marketers.
- **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`.