# SW Pillar Slides — AI Agent Reference

**Module name:** SW Pillar Slides  
**Status:** Shipped. **Master version number:** 2026.08.20.17.30.  
**Use this document when:** The user asks about SW Pillar Slides—tabbed/pill nav with a content column and an image filmstrip (peek of the next slide).

---

## Instructions for the AI Agent

- Unless the user gives HubSpot CLI access, answer **only** from this document and other docs they provide.
- Tell them **exact** tab / group / field labels when configuring.
- Support / bugs: https://smithworks.marketing/contact

---

## 1. Purpose and When to Use

**SW Pillar Slides** is a section module for **topic slides**: nav (tabs, pills, or buttons) above an **image column**, with a **content column** (headings, bullets, rich text, CTAs) that can change per slide or stay on slide 1 (**Static content**).

- **Side-by-side:** content | nav + image filmstrip with optional **peek** of the next image.
- **Stacked:** content and image stacked; **no peek**—current image only.

**Use for:** industry/topic switchers, capability slides, product lines with one image per topic.  
**Not for:** accordion panels (use **SW Pillar Accordion**); single static image+copy without slide nav (use **SW Pillar Section**); card grids (**SW Cards**).

---

## 2. Slide images — crop, size, and performance (detail)

### Crop / equal height

In **side-by-side + peek** mode, every slide image sits in a shared **3:2** frame (`aspect-ratio: 3 / 2`) with **`object-fit: cover`** (center by default, or **XL Background Position**). Different upload sizes still share the same height; non‑3:2 art is **cropped**. Prefer the **same 3:2 ratio on every slide** so peeks match.

Stacked / reduced-motion may use natural image height instead of the forced 3:2 peek frame.

### Recommended upload sizes (3:2)

| Choice | Pixels (W×H) | When |
|--------|----------------|------|
| **Good default** | **900 × 600** | Typical **6-column** image column; lighter files |
| **Better retina / wider column** | **1200 × 800** | Sharper on 2× displays; better when secondary is ~**8 columns** |

Editors choose one; both are valid 3:2. SW default card samples are ~1200×800.

### One upload vs breakpoint overrides

- **Default path:** Upload **one** XL (or primary) image. The module uses HubSpot **`resize_image_url`** (via `sw_bg_image_url_resize`) so `<picture>` serves roughly **1200 / 1000 / 720 / 480** px-wide CDN variants at XL / LG / MD / SM breakpoints. Mobile does **not** need a separate upload just to get a smaller file.
- **Optional overrides** (Content → Slide → Override Desktop/Tablet/Mobile Image): use when you need a **different** crop/file, or an even smaller authored asset. Leave overrides **off** for normal “same image, smaller file” cases.
- **Module Outer/Inner backgrounds** still use the full override pattern because backgrounds often need **different** art per breakpoint—not the same rule as slide images.

### Where to set this in the editor

- **Content → Slides → [slide] → Slide image → XL Image** — primary upload; help text summarizes sizes.
- **Style → Slide settings → Image** — peek on/off, gap, opacity, fade; group help mentions 3:2 cover.

### Alt text

Set meaningful **alt** on the image (describes the photo). Do not only repeat the nav **Slide label**.

---

## 3. List Settings & content

- **Style → List Settings:** list type, default icon/image, font size, marker width, spacing (same pattern as SW Pillar Section). Per-slide bullets can still **Override** for a custom icon/image.
- **Content Colors:** intro vs slide contexts — labels stay Text Color / Custom Text Color / Link Colors; context is in inline help.
- **Sample slides:** module-focused defaults (Navigation / Peek / Content / Style). After flatten, **re-add** the module on a page if editors stay empty while the preview shows sample.

## 4. Peek (image column)

- **Enable peek** (Style → Slide settings → Image): side-by-side only; shows a sliver of the **next** slide.
- **Peek first image on last slide:** when on, last slide peeks slide 1; clicking peek or the first nav control still **scrolls back to the start** (not a continuous loop).
- Peek opacity / fade / gap control the sliver look. Peek stays inside Module Inner.

---


### Nav colors (Tabs labels + underlines)

**Organization:** Style → Slide navigation shows **Tabs colors** or **Pills — Inactive / Active / Hover** based on Navigation style (HubSpot nesting limit — no nested Nav colors wrapper). Custom pickers stay with their parent choice.

**Tabs — Labels** (inactive / hover / active): **Auto** inherits surrounding text; theme tokens; **Custom**. Defaults: inactive `#666666`, hover/active `#30343b`.

**Tabs — Underlines:** theme + Custom. Defaults Active `#0072b2`, Hover `#cc0201`. Active solid; wipe active → hover; active tab uses hover underline while hovered.

### Pills colors + padding

**Padding** (below Nav gap when Pills): **Left/right padding (px)** and **Top/bottom padding (px)** — full-width fields. Value is **per side** (30 = 30px left and 30px right), not half of a total.

**Pills colors** groups: **Pills — Inactive / Active / Hover**, each with **Font color**, **Fill color**, **Outline color** (+ Custom pickers). Fill/Outline support **None** (transparent). Active hover uses the Hover group. Defaults align with Tabs hexes where useful (inactive font/outline `#666666`, active fill/outline `#0072b2`, active font White, hover font `#30343b`, hover outline `#cc0201`).

- **Buttons** — theme button styles: Active / Inactive / **Hover** (default Secondary). Not the Tabs/Pills color groups.
- **`prefers-reduced-motion`** — Tabs solid border underline (no wipe).

## 5. Structure (high level)

1. Optional **heading panel** (Cards-style: headings, description, heading buttons).  
2. **Slide row:** primary content column + secondary (nav + image track).  
3. Optional **Footer Buttons**.  
4. Standard **Module Outer / Inner** paint (Aurora, Effect, background image with breakpoint overrides).

**Static content:** nav + images change; primary copy/buttons stay on slide 1.

**Nav:** Tabs | Pills | Buttons above the image; no swipe; no auto-advance in v1.

---

## 6. Configuration reference (images)

| Location | Field | Notes |
|----------|--------|------|
| Content → Slides → Slide image | XL Image | 3:2; 900×600 good / 1200×800 retina |
| Same | XL Background Position | Focal point under cover crop |
| Same | Override LG/MD/SM + images | Optional; else auto-resize from XL |
| Style → Slide settings → Image | Enable peek, gap, opacity, fade, peek first on last | Peek appearance |

---

## 7. Related modules

| Module | Relationship |
|--------|----------------|
| **SW Pillar Section** | Single section image + content; no slide filmstrip |
| **SW Pillar Accordion** | Accordion + swapping image |
| **SW Cards** | Card grid; heading panel pattern shared with intro |

---

## 8. Document Version

- **2026.08.20.17.30 (Finish Up):** Layout-critical CSS — `css_render_options.async: false` + inline `list-style: none` on lists (CLS / cold-cache bullet FOUC).
- **2026-08-20:** Pills colors (Inactive/Active/Hover × Font/Fill/Outline) + pill padding; Tabs/Pills color groups.
- **2026-08-20:** Locked Tabs nav color defaults (labels + underlines Custom hexes).
- **2026-08-20:** Nav color wiring (label Auto/theme/Custom; underline theme/Custom).
- **2026-08-20:** Animated Tabs underlines (active + hover colors; POC wipe).
- **2026.08.20.15.01 (Finish Up):** First official ship. List Settings; flatten slide content; labeling/Title Case; Aurora outer/inner/heading panel; peek polish; CTA defaults → sw-module-documentation; Documentation → /faqs.
- **2026-08-20:** Slide image help + auto `resize_image_url` ladder; recommend 900×600 / 1200×800 (3:2); peek wrap docs.