# SW Pillar Accordion — AI Agent Reference

**Module name:** SW Pillar Accordion  
**Use this document when:** The user asks about the SW Pillar Accordion HubSpot module—what it does, how to configure it, or how to change a specific element (colors, images, buttons, borders, visibility, 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 Accordion (or other Smithworks modules):

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

---

## Versions, roll-down, and alias risk (master before 2026.03.30.12.18)

If the **Master version number** in the module’s `module.html` / `module.css` / `module.js` header is **before `2026.03.30.12.18`**, that copy may still define **legacy** module-level and per-panel CTA fields (**Add Button 1**, **Add Button 2**, disable-legacy toggles, etc.). **Current master** removed those fields entirely in favor of **`Buttons`** repeaters only: **`cta_button_items`** (section-level) and **`accordion_button_items`** (per panel).

Rolling **this** master version onto an older theme crosses a **structural** boundary for saved page/module JSON. Before and after roll-down:

1. **Diff** the theme’s `fields.json` against master.
2. Read **`docs/alias-mapping-risks.json`** (key **`SW Pillar Accordion.module`**) and **`docs/SW-Module-Docs/SW Pillar Accordion/MAINTENANCE-NOTES.md`**.
3. **Spot-check** live pages that used legacy CTAs; **re-enter** buttons in the **Buttons** repeaters if content did not carry over.

**Critical changelog note:** Legacy button support was **removed** at Finish Up **2026.03.30.12.18** — not merely hidden. Empty repeaters or invalid rows (no button text, or link left as `#`) **do not** render a visible button.

---

## 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 Accordion** module provides:

- **Section-level headings** (one or more) and an optional **intro/Content Area** (rich text) above the accordion.
- A **two-column layout:** on the left, **accordion items** (clickable headers plus expandable panels); on the right, a **single image** that switches to match the **active** accordion item.
- **Per-panel content:** each accordion item can have optional **Panel Headings**, **Panel Content** (rich text), a **Panel Image**, and optional **Buttons** (repeater — add as many CTAs as needed).
- **Section-level CTAs:** optional **Buttons** repeater below the accordion (same field pattern as panel buttons).
- **Styling:** module background (color or gradient), accordion **border color**, **image visibility** by breakpoint (hide on medium and/or small screens), and **module spacing**.

Use it for **FAQs**, **feature overviews**, **step-by-step guides**, or any content that benefits from expandable panels plus a supporting image.

### Use Cases

- **Capabilities:** Accordion panels; image that changes per active panel; headings, content, CTAs per panel.
- **Use for:** FAQs; feature overviews; step-by-step guides; any expandable-panel content with a supporting image.
- **When to choose SW Pillar Section instead:** When you need sections (image left/right) with headings, bullets, CTAs—not accordion panels. SW Pillar Section is section-based; SW Pillar Accordion is accordion-based.
- **When to choose SW Magic Accordion instead:** When you need a simple accordion without an image.

### Related Modules

| Module | Relationship |
|--------|--------------|
| **SW Pillar Section** | Image+content sections with headings, bullets, CTAs. Section-based, not accordion. |
| **SW Magic Accordion** | Simple accordion without image. |
| **SW Image & Text** | Simple image+text; no accordion. |

---

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

From top to bottom:

1. **Module-level headings** — From the **Headings** group. Renders above the Content Area.
2. **Content Area** — Rich text intro between the headings and the accordion.
3. **Main layout:**  
   - **Left:** Accordion. Each item has:
     - A **vertical bar** on the left edge. Active and inactive colors are configurable in **Style** tab → **Divider Settings**.
     - A **clickable header** (Accordion Heading): native **`<button type="button">`** inside an **`h3`** for accessibility (`aria-expanded`, `aria-controls`, panel `id`, `role="region"`). **Border-bottom** on the header row; color from **Style** tab → **Divider Settings**.
     - An **expandable panel** with optional Panel Headings, Panel Content, and optional **Buttons** (repeater).
   - **Right:** **Image** that changes when the user selects a different accordion item. Can be hidden on **medium** (≤992px) and/or **small** (≤768px) screens via Style tab.
4. **Section-level CTA buttons** — Below the accordion, from **CTA Buttons** → **Buttons** repeater (add a row per button).

---

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

---

**Headings** (repeater)  
- **Where:** Content tab → **Headings**.  
- **What:** One or more module-level headings above the Content Area.  
- **Fields per heading:**
  - **Heading** — Text.
  - **Size** — HTML tag: H1–H6, P. Default: H1.
  - **Display Size** — Visual size: Auto, H1–H6, P, or L / XL / XXL / XXXL (display-4–1). Default: display-4 (L).
  - **Color** — Auto, Primary, Secondary, Tertiary, White, Black, Dark, Light, Success, Info, Warning, Danger, or **Custom**. If Custom, **Custom Color** (color picker) appears.
  - **Align** — Auto, Left, Center, Right.
  - **Override Padding** — On: use **Padding Top (px)** and **Padding Bottom (px)**. Off: padding from theme.
  - **CSS Class** — Optional extra class on that heading.
  - **Override Medium Display Size** — On: **Medium Display Size** (tablets, 768–991px). Off: scales from desktop.
  - **Override Small Display Size** — On: **Small Display Size** (phones, ≤767px). Off: scales from desktop.

---

**Content Area**  
- **Where:** Content tab.  
- **What:** Rich text between the Headings and the accordion. Standard WYSIWYG.

**Content style** (section intro)  
- **Where:** Content tab, below Content Area.  
- **What:** Typography for the intro: Default, Large (text balanced), Large (text full-width), Small, Blockquote.

---

**Accordion Items** (repeater)  
- **Where:** Content tab → **Accordion Items**.  
- **What:** Each item = one accordion tab (header + panel). You can add, remove, and reorder. **No maximum**; you can have more than three. The module recommends **no more than 3** for optimal UX, but more are allowed if needed.  
- **Fields per item:**

  - **Accordion Heading** — Text in the **clickable** accordion header (the “tab”).
  - **Panel Headings** (repeater) — Optional headings *inside* the panel. Same structure as module Headings (Heading, Size, Display Size, Color, Align, Override Padding, CSS Class, Medium/Small overrides).
  - **Panel Content** — Rich text in the expandable area.
  - **Content style** (per panel) — Typography for panel content: Default, Large (text balanced), Large (text full-width), Small, Blockquote.
  - **Panel Image** — Image shown on the **right** when this item is active. One image per item; the visible one switches with the active tab.
  - **Buttons** (repeater) — Optional CTAs in this panel. **Add** a row for each button. Each row includes:
    - **Link** — URL field (must not be left as `#` if you want a real button).
    - **Button Text** — Label on the button (empty text = no visible button for that row).
    - **Button Style** — Primary, Secondary, Tertiary, White, Black, Dark, Light, Gradient One, Gradient Two, Simple Link.
    - **Add icon** — On: show icon on this button. **Icon** sub-group: icon picker, **Position** (Left / Right), **Purpose** (Decorative / Semantic).

---

**CTA Buttons** (group)  
- **Where:** Content tab → **CTA Buttons**.  
- **What:** Optional **section-level** buttons below the accordion, using the same **Buttons** repeater pattern as each panel (Link, Button Text, Button Style, optional icon).  
- **Fields:**
  - **Buttons** (repeater) — Add rows for each section-level CTA. Rows without text or with only a `#` link do not render a visible button.
  - **Button Alignment** — Horizontal alignment: Left, Center (default), or Right.
  - **Override Medium Alignment** — On: set custom alignment for tablets (768px–991px). Off: inherit from desktop.
  - **MD Screen Button Alignment** — Shown only if Override Medium Alignment is on. Options: Auto, Left, Center, Right.
  - **Override Small Alignment** — On: set custom alignment for phones (≤767px). Off: inherit from desktop.
  - **SM Screen Button Alignment** — Shown only if Override Small Alignment is on. Options: Auto, Left, Center, Right.

---

### 3.2 Style Tab

**Module Background** (group)  
- **Where:** Style tab → **Module Background**.  
- **Background Option** — **Color** or **Gradient**.  
  - **Color:** **Theme Color** = None, Primary, Secondary, Tertiary, White, Black, Dark, Light, Success, Info, Warning, Danger, or **Custom**. If Custom, **Custom Color** (color picker) appears.  
  - **Gradient:** **Gradient** (gradient picker).

---

**Content Colors** (group)  
- **Where:** Style tab → **Content Colors**.  
- **What:** Text and link colors for the **Content Area** and **accordion panel content**. Use when the background is Custom Color or when theme defaults do not apply correctly.  
- **Text Color** — Theme defaults, Primary, Secondary, Tertiary, White, Black, Dark, Light, Success, Info, Warning, Danger, Gradient One, Gradient Two, or **Custom**. If Custom, **Custom Text Color** (color picker) appears. Inline help: Content Area and Panel content text. Default: Theme defaults.  
- **Link Colors** — **Theme Defaults (auto)**, **On Dark Background**, **On Light Background**. Inline help names these options. Required when background is Custom Color. Applies to Content Area and Panel content links. Default: Theme Defaults (auto).

---

**Image Settings** (group)  
- **Where:** Style tab → **Image Settings**.  
- **Disable Image on Tablet and Below** — When **on**, the right-side image is **hidden** at **992px and below**. Content uses full width. Inline help: Breakpoint: below 992px (tablet + mobile).  
- **Disable Image on Mobile** — When **on**, the right-side image is **hidden** at **≤767px**. Content uses full width. Inline help: Breakpoint: ≤767px (SM).  
- **Override Image Border Radius** — When **on**, use **Image Corner Radius** (px). When **off**, use theme default.  
- **Image Corner Radius** — Shown when Override Image Border Radius is on. Rounds the corners of the image; 0 = no radius.

---

**Content Settings** (group)  
- **Where:** Style tab → **Content Settings**.  
- **What:** Text alignment for the **main content area** (above the accordion). Inline help: Main content area (above accordion).  
- **Text Alignment** — Default: Left, Center, or Right. Inline help: Main content area.  
- **Override Text Alignment (Tablet)** — When **on**, **Text Alignment (Tablet)** appears. Inline help: Breakpoint: 768px - 991px (MD).  
- **Override Text Alignment (Mobile)** — When **on**, **Text Alignment (Mobile)** appears. Inline help: Breakpoint: ≤767px (SM).

---

**Panel Content Settings** (group)  
- **Where:** Style tab → **Panel Content Settings**.  
- **What:** Text alignment for **accordion panel content** (inside each expanded panel). Inline help: Accordion panel content.  
- **Text Alignment** — Default: Left, Center, or Right. Inline help: Panel content.  
- **Override Text Alignment (Tablet)** — When **on**, **Text Alignment (Tablet)** appears. Inline help: Breakpoint: 768px - 991px (MD).  
- **Override Text Alignment (Mobile)** — When **on**, **Text Alignment (Mobile)** appears. Inline help: Breakpoint: ≤767px (SM).

---

**Divider Settings** (group)  
- **Where:** Style tab → **Divider Settings**.  
- **Show Bottom Divider on Last Item** — When **on**, the bottom divider (border) appears on the last accordion item. When **off** (default), the last item has no bottom border.  
- **Bottom Divider Color** — Applied to the **border-bottom** of each accordion header row. Choices: Auto, Primary, Secondary, Tertiary, White, Black, Dark, Light, Success, Info, Warning, Danger, **Custom**. If Custom, **Custom Bottom Divider** (color picker) appears. Default: Primary.
- **Active Left Bar Color** — Color for the left vertical bar when an accordion item is **active** (expanded). Choices: Auto, Primary, Secondary, Tertiary, White, Black, Dark, Light, Success, Info, Warning, Danger, **Custom**. If Custom, **Custom Active Left Bar Color** (color picker) appears. Default: Secondary.
- **Inactive Left Bar Color** — Color for the left vertical bar when an accordion item is **inactive** (collapsed). Choices: Auto, Primary, Secondary, Tertiary, White, Black, Dark, Light, Success, Info, Warning, Danger, **Custom**. If Custom, **Custom Inactive Left Bar Color** (color picker) appears. Default: Tertiary.

---

**Module Settings** (group)  
- **Where:** Style tab → **Module Settings**.  
- **Spacing** — Top / right / bottom / left **padding** for the module (not margin). Default: 50px top, 25px right/bottom/left. Use the spacing controls provided.  
- **Max Module Width** — Default, Small, Large, Full Width, or Custom. When Custom, **Max Module Width (px)** appears.  
- **XL Module Height** — Minimum height for XL screens; cascades to smaller breakpoints unless overridden. Override Desktop/Tablet/Mobile Height toggles for breakpoint-specific height.

---

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

### Change the main section heading text, size, or color  
**Content** tab → **Headings** → edit the **Heading** (text), **Size**, **Display Size**, **Color** (or **Custom Color**), and **Align** as needed.

### Change the intro paragraph above the accordion  
**Content** tab → **Content Area**. Edit the rich text.

### Change the accordion tab labels (clickable headers)  
**Content** tab → **Accordion Items** → open an item → **Accordion Heading**. Edit per item.

### Change the border color under the accordion headers  
**Style** tab → **Divider Settings** → **Bottom Divider Color** (or **Custom Bottom Divider** if Custom).

### Show or hide the bottom divider on the last accordion item  
**Style** tab → **Divider Settings** → **Show Bottom Divider on Last Item**. Turn **on** to show the divider on the last item; turn **off** (default) to hide it.

### Change the color of the left vertical bars (active/inactive)  
**Style** tab → **Divider Settings** → **Active Left Bar Color** (for expanded items) and/or **Inactive Left Bar Color** (for collapsed items). Use theme colors or **Custom** with the color picker. Defaults: Active = Secondary, Inactive = Tertiary.

### Change the color of the module background  
**Style** tab → **Module Background** → **Background Option** (Color or Gradient). For Color: **Theme Color** or **Custom Color**. For Gradient: **Gradient** picker.

### Hide the right-side image on mobile (or tablet)  
**Style** tab → **Image Settings**.  
- **Disable Image on Mobile** → on: hidden at **≤767px**.  
- **Disable Image on Tablet and Below** → on: hidden at **992px and below**.

### Hide the right-side image only on tablets (not desktop or phones)  
**Not configurable** via module fields. The module can hide the image on small only (≤768px), or on medium+small (≤992px), but not **tablets only** (768–991px). To hide the image only on tablets, use **custom CSS**: add a `@media` rule for **768px–991px** targeting **`.sw-pillar-accordion__image-side`** (and optionally your **Custom ID** or **Custom Classes** for a specific instance). Add this in your theme’s custom CSS file (e.g. **`custom-styles.css`** for Sprocket Rocket themes).

### Add or edit a CTA inside an accordion panel  
**Content** tab → **Accordion Items** → open the item → **Buttons**. Add a **row** per button; set **Link**, **Button Text**, and **Button Style**. For an icon, turn on **Add icon** and configure **Icon** (picker, position, purpose).

### Add or edit the section-level CTAs below the accordion  
**Content** tab → **CTA Buttons** → **Buttons** repeater. Add rows as needed. Use **Button Alignment** (and optional medium/small overrides) for horizontal alignment.

### Change the image for a specific accordion panel  
**Content** tab → **Accordion Items** → open the item → **Panel Image**. Upload or select the image.

### Change heading or text color inside a panel  
**Content** tab → **Accordion Items** → that item → **Panel Headings**. Edit **Color** (or **Custom Color**) for the relevant heading. Panel *content* (rich text) uses **Style** tab → **Content Colors** → **Text Color**.

### Change content area or panel text/link colors  
**Style** tab → **Content Colors** → **Text Color** (and **Custom Text Color** if Custom) and **Link Colors**. Applies to both the main Content Area and accordion panel content.

### Change the panel body (rich text) color  
**Style** tab → **Content Colors** → **Text Color**. If you need different colors for main content vs. panel content, use **custom CSS** targeting `.sw-pillar-accordion__content` or `.sw-pillar-accordion__panel-content`.

### Change the vertical bar color (active/inactive) next to each accordion item  
**Style** tab → **Divider Settings** → **Active Left Bar Color** (for expanded items) and/or **Inactive Left Bar Color** (for collapsed items). Use theme colors or **Custom** with the color picker. Defaults: Active = Secondary, Inactive = Tertiary.

### Change text alignment of main content (above accordion)  
**Style** tab → **Content Settings** → **Text Alignment**. Use **Override Text Alignment (Tablet)** and **Override Text Alignment (Mobile)** for breakpoint-specific alignment.

### Change text alignment of panel content (inside expanded panels)  
**Style** tab → **Panel Content Settings** → **Text Alignment**. Use **Override Text Alignment (Tablet)** and **Override Text Alignment (Mobile)** for breakpoint-specific alignment.

### Change the accordion tab (header) text color or font  
**Not configurable** via module fields. The header inherits color. Use **custom CSS** and target `.sw-pillar-accordion__header` or `.sw-pillar-accordion__header-heading`.

### Add padding around the whole module  
**Style** tab → **Module Settings** → **Spacing**. Adjust top/right/bottom/left **padding** as needed. Default: 50px top, 25px right/bottom/left. The control affects **padding** only, not margin.

### Add a custom HTML `id` or CSS class to the module  
**Content** tab → **Custom ID** and/or **Custom Classes**.

### How many accordion items can I add?  
**Content** tab → **Accordion Items**. You can **add more than three**; there is no maximum. The module recommends **no more than 3** for optimal UX, but more are allowed.

### Reorder accordion items  
**Content** tab → **Accordion Items**. Use drag-and-drop in the HubSpot editor to reorder. The **first** item is open by default when the page loads; that behavior is not configurable via module fields.

---

## 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. accordion header font/color, specific spacing or layout tweaks).
- 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. (If your theme uses a different custom CSS file, add overrides there instead.)  
- Add your overrides there so they persist across theme updates and apply to your pages.

**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 any **Custom Classes** you add.

| Element | Class(es) | Notes |
|--------|-----------|--------|
| Module wrapper | `.sw-pillar-accordion` | Plus `custom_classes` if set. `id` = **Custom ID** if set. |
| Module-level headings container | `.sw-pillar-accordion__headings` | |
| Module-level heading | `.sw-pillar-accordion__heading` | Plus display/color/align classes (e.g. `.display-4`, `.text-primary`). |
| Content Area | `.sw-pillar-accordion__content` | |
| Left + right container | `.sw-pillar-accordion__container` | Flex row; stacks on smaller screens. |
| Accordion (left) | `.sw-pillar-accordion__accordion-side` | |
| Accordion items list | `.sw-pillar-accordion__items` | |
| Single accordion item | `.sw-pillar-accordion__item` | Add `.active` when expanded. |
| Vertical bar (left) | `.sw-pillar-accordion__bar` | |
| Bar when active | `.sw-pillar-accordion__bar--active` | Color from **Style** tab → **Divider Settings** → **Active Left Bar Color** (default: secondary). |
| Bar when inactive | `.sw-pillar-accordion__bar--inactive` | Color from **Style** tab → **Divider Settings** → **Inactive Left Bar Color** (default: tertiary). |
| Header + panel wrapper (has border) | `.sw-pillar-accordion__header-wrapper` | `border-bottom` color from Style tab. |
| Clickable accordion header | `.sw-pillar-accordion__header` | `<button type="button">` inside `h3.sw-pillar-accordion__header-heading` for Accordion Heading text. |
| Expandable panel | `.sw-pillar-accordion__panel` | Hidden by default; `.active` item’s panel is visible. |
| Panel content wrapper | `.sw-pillar-accordion__panel-content-wrapper` | |
| Panel headings | `.sw-pillar-accordion__panel-heading` | Plus display/color/align classes. |
| Panel body (rich text) | `.sw-pillar-accordion__panel-content` | |
| Panel + section CTAs | `.sw-pillar-accordion__cta` | Buttons use theme classes (e.g. `.btn`, `.btn-primary`). |
| Image (right) | `.sw-pillar-accordion__image-side` | |
| Image hidden on tablet and below | `.sw-pillar-accordion__image-side--hide-md` | Hidden ≤992px when Disable Image on Tablet and Below is on. |
| Image hidden on mobile | `.sw-pillar-accordion__image-side--hide-sm` | Hidden ≤767px when Disable Image on Mobile is on. |
| Image container | `.sw-pillar-accordion__image` | |
| Image `<img>` | `.sw-pillar-accordion__image-item` | Visible when `.active` on parent item. |

**Breakpoints (match module behavior):**  
- **Small (SM):** ≤767px (image hidden when **Disable Image on Mobile** is on).  
- **Medium (MD):** 768–991px.  
- **Large (XL):** 992px and up (image hidden when **Disable Image on Tablet and Below** is on: 992px and below).

---

## Document Version

- **Module reference:** SW Pillar Accordion (master).  
- **Master version number:** 2026.03.30.12.18.  
- **Doc last updated:** 2026-03-30.  
- **2026.03.30.12.18 (Finish Up — critical):** **Legacy CTA support removed.** Module-level and per-panel **Add Button 1/2** (and related legacy fields) are **gone**; **Buttons** repeaters only (`cta_button_items`, `accordion_button_items`). **Alias / roll-down:** themes with Master version **before** this stamp cross a structural milestone — see the section **Versions, roll-down, and alias risk** above and `docs/alias-mapping-risks.json`. **Markup:** Native `<button>` accordion triggers with `aria-*` / `role="region"`; clicking the already-open row is a no-op; new-tab links get `rel`. **Rendering:** Rows without button text or with `#` only as href do not show a button; CSS hides empty CTA wrappers.  
- **2026-02-16:** Content Settings (text alignment for main content above accordion); Panel Content Settings (text alignment for panel content); Content Colors (text/link colors for Content Area and panel content); Image Settings labels: Disable Image on Tablet and Below (≤992px), Disable Image on Mobile (≤767px); Override Image Border Radius, Image Corner Radius; Border Settings renamed to Divider Settings; Module Spacing renamed to Module Settings with default padding 50px top, 25px right/bottom/left; common tasks for text alignment and content colors.  
- **2026-01-29:** Removed button arrow options (Button 1 Arrow, Button 2 Arrow). Buttons now support icons only via the Add Icon toggle and Icon group (icon picker, position, purpose). Added mobile alignment controls for section-level CTA buttons (Button Alignment with MD/SM overrides). Added configurable left bar colors (Active Left Bar Color and Inactive Left Bar Color) in Border Settings. Renamed "Border Color" to "Bottom Divider Color" and "Custom Border Color" to "Custom Bottom Divider". Added "Show Bottom Divider on Last Item" toggle field in Border Settings.  
- **2026-01-28:** Added tablets-only image hide (custom CSS), accordion item count (no max; recommend ≤3), Module Spacing = padding only, and "How many accordion items?" task.  
- 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`.