# SW Feature List — AI Agent Reference

**Module name:** SW Feature List  
**Master version number (as of this document):** 2026.04.01.15.44  
**Use this document when:** The user asks about the **Smithworks SW Feature List** HubSpot module—plan comparison **tables**, **rows** (category vs feature), **cells** (checks, icons, text, buttons), **Style → Table Box Settings**, **Comparison Table Colors** (including sticky-column / table-box background behavior), **Comparison Table Text** (including **Font colors** and **Override … fonts**), **Row Spacing**, **Headings** and **Headings accent line**, **mobile / horizontal scroll** behavior, or how it differs from **SW Cards Products**.

---

## Instructions for the AI Agent

- **Unless the user explicitly provides HubSpot CLI or Design Manager access, assume you cannot see their portal.** Answer from this document and any other files the user supplied.
- **Editor paths:** Use the **exact** tab names, group names, and field labels in **§3 Configuration Reference** below.
- **Not in the module:** Say so, then point to **custom CSS** (often **`custom-styles.css`** on Sprocket Rocket–based themes). Use **§5 Appendix** selectors when possible.
- **Support:** [smithworks.marketing/contact](https://smithworks.marketing/contact)

---

## HubSpot video and file uploads (plans and limits)

**Content → Module Background Video** (last group on Content) may use **HubSpot Video**, **Video from Files**, and/or **External Embed**.

- **HubSpot Video:** May require subscription features; confirm hub tier in HubSpot documentation.
- **Video from Files:** File Manager uploads; many portals enforce **~20 MB per file** and storage limits—compress or use embed if blocked.
- **External embed:** YouTube/Vimeo URL-style sources.

---

## 1. Purpose and when to use

**SW Feature List** renders a **semantic HTML table** for **plan / tier comparison**:

- **Content → Plan columns** — one column per plan (e.g. Standard, Premium). **Plan title** and optional **Plan subtitle** become the table header row.
- **Content → Rows** — repeater of **Category heading** rows or **Feature** rows. **Category** rows use a **sticky first-column label** plus one **filler cell per plan column** (same grid as feature rows) so section headings stay fixed when the table scrolls horizontally on narrow viewports. Each **feature** row has a **Label** (first column) and **Cells (per plan)** — **one cell per plan column, in the same order** as Plan columns.
- **Cell Display** options include: **Included (check)**, **Not included (cross)**, **Empty**, **Custom icon (Font Awesome)**, **Custom icon (upload)**, **Custom text**, and **Button(s)** (stacked CTAs per cell, SW Button–style repeater).
- **Content → Headings** (optional repeater) — eyebrow/title lines **above** the table; optional **Style → Headings accent line** (horizontal rule) below the headings block.
- **Style → Table Box Settings** — wrapper around **only** the comparison table (not the headings block): **Spacing**, optional **border radius** override, optional **border** (theme or custom color; color fields show only when border + source match), **Background** (**None** / **Theme Color** / **Custom Color** / **Gradient** / **Image** with base + overlay — no video). When **Background** is **Theme Color** or **Custom Color**, transparent backgrounds for **Top-left corner**, **Category heading row**, and **Feature label column** in **Comparison Table Colors** automatically reuse that **same solid fill** in scoped CSS (readability when plan columns scroll sideways). If **Table Box** is **None**, **Gradient**, or **Image**, keep those comparison regions on **Theme** or **Custom** if you need an opaque sticky column—match the **module background** if necessary. **Preview on a narrow / mobile-width viewport** after changing colors.
- **Style → Comparison Table Colors** — **backgrounds only** per region: corner cell, plan column headers, plan column body, category heading row, feature label column; plus **Row borders** (**Plan title row** / category & feature rows / last row — bottom border weight + color; 0 weight or 0% opacity = no line). Typography defaults are **not** set here. **Field help text** explains coalescing with **Table Box** and mobile testing.
- **Style → Comparison Table Text** — **Font colors** (default text color when overrides are **off**: **Theme (body text)** = theme body variable, or **Custom** for one shared color—including plan body cells when **Override plan cell fonts** is off). **Override plan title fonts**, **Override plan subtitle fonts**, **Override plan cell fonts**, **Override category heading fonts**, **Override feature row fonts**: when **on**, the matching **font** field row is shown and applied (family, size, weight, color, decoration); when **off**, that text uses **inherited theme body typography** plus **Font colors**. **Feature Row Indent** (0–100 px) always available for feature row labels.
- **Style → Row Spacing** — one value **0–20 px** (default 10): same **top and bottom padding** on every table cell (keeps content vertically centered as rows grow).
- **Style → Module Settings** — spacing, max width, min heights (XL / cascade). **Module Background Settings** and **Module Background Video** follow the same patterns as other SW section modules.

**Compared to SW Cards Products:** Cards Products is a **card grid** with a **bullet repeater per card** and optional **pricing fields**. SW Feature List is a **single table**: **rows × plan columns**, ideal when every row is the **same attribute** compared across plans.

**Compared to SW Cards:** SW Cards uses **rich text bodies** per card and optional **section-level CTAs**. SW Feature List does **not** use card repeaters—it uses **table rows and cells**.

---

## 1b. Use cases

- **SaaS or membership tiers:** Feature rows with checks/crosses; optional **Button(s)** in the plan column (“Get started”, “Contact sales”).
- **Course or program comparison:** Category rows (e.g. “Learning access”) and feature rows (video hours, coaching calls, certification).
- **Enterprise vs SMB:** Same layout; use **Custom text** cells for “Unlimited” / “Up to 10 seats” instead of only checks.
- **Icons per benefit:** **Custom icon (Font Awesome)** or **upload** in cells when checkmarks are not enough.
- **When **not** to use:** You need **paragraphs** or **hero-style copy** per column—use **SW Cards** or **SW Pillar Section**. You need **blog posts** as columns—not this module. You want **independent cards** that scroll as a slider—**SW Cards Products** or **SW Cards**.

---

## 2. Module structure (page order)

1. **Outer wrapper** — `smithworks-module sw-feature-list`; spacing / max width / min height from **Style → Module Settings**.
2. **Headings** (if any) — repeater above the table; optional accent line under **Style → Headings accent line**.
3. **Table box** — `.sw-feature-list__table-box` wraps `.sw-feature-list__table-scroll` (horizontal overflow) and the **table**.
4. **Table** — `table.sw-feature-list__table`: header row from **Plan columns**; body from **Rows** repeater. Table has a **minimum width**; when the viewport is narrower, **`.sw-feature-list__table-scroll`** scrolls horizontally (`overflow-x: auto`). Keyboard users can focus the scroll region (WCAG).
5. **Category rows** — `th.sw-feature-list__category.sw-feature-list__sticky-col` (label) + `td.sw-feature-list__category-cell` per plan (decorative; `aria-hidden`); same sticky behavior as feature labels.
6. **Feature rows** — `th.sw-feature-list__feature.sw-feature-list__sticky-col` + one `td` per plan cell (content per **Display**).
7. **Module Background Video** — when configured, follows the same overlay/wrap pattern as other SW modules.

---

## 3. Configuration reference (high level)

### Content tab

- **Enable Module**, **Custom ID**, **Custom Classes**
- **Headings** — repeater (optional): heading text, size, display size, color, alignment, responsive overrides, text shadow, padding override, CSS class
- **Plan columns** — repeater: **Plan title**, **Plan subtitle**
- **Rows** — repeater: **Row type** (Category heading / Feature), **Label**, **Show label in chart** (feature), **Label indent** (feature rows only), **Cells (per plan)** with:
  - **Display** (check / cross / empty / FA icon / upload / custom text / Button(s))
  - **Font Awesome icon**, **Uploaded icon**, **Custom text** (per visibility)
  - **Buttons** repeater (when Display = Button(s))
  - **Cell text / icon color** overrides (hidden for Button(s) and some display types per field rules)
- **Module Background Video** — type, sources, poster, embed

### Style tab

- **Module Settings** — spacing, max module width, XL/LG/MD/SM height groups
- **Module Background Settings** — background option, images, colors, gradient, video overlay/playback (standard SW pattern)
- **Table Box Settings** — spacing around the table wrapper; border radius; border + colors; background (none / theme / custom / gradient / image)
- **Comparison Table Colors** — **backgrounds** for corner, plan header, plan body, category row, feature label column (none / theme / custom each); **Row borders** (plan title row, category & feature rows, last row — bottom border weight + color)
- **Comparison Table Text** — **Font colors** (theme body vs custom); **Override … fonts** toggles for plan title, plan subtitle, plan cells, category heading, feature row (font rows visible only when on); **Feature Row Indent**
- **Row Spacing** — row padding (top & bottom), 0–20 px
- **Headings accent line** — show toggle; line style (theme/custom color, height, **Width** in **px** 50–2000, max width %, padding above/below). Upgraded instances: old **width_percent** values migrate as literal **px**—re-tune if the line looks wrong.

---

## 4. Common tasks (“How do I…”)

- **Add a plan column** → Content → **Plan columns** → add item; then in **each feature row**, add a matching **cell** in **Cells (per plan)** (same order).
- **Add a section heading row** → Content → **Rows** → add row → **Row type** = **Category heading** → set **Label**.
- **Show a checkmark in one plan only** → Feature row → open the cell for that plan → **Display** = **Included (check)**; other plans **Empty** or **Not included (cross)**.
- **Stack two buttons in a plan cell** → **Display** = **Button(s)** → **Buttons** repeater → add rows.
- **Match site body typography for titles, labels, and plan cells** → Style → **Comparison Table Text** → **Font colors** = **Theme (body text)**; leave all **Override … fonts** toggles **off** (default on new modules). Turn **Override plan cell fonts** **on** only when you need custom cell color/size.
- **Customize fonts for one row type only** → Turn **Override … fonts** **on** for that row; set the font field that appears.
- **Change table backgrounds** → Style → **Comparison Table Colors** → pick the region.
- **Add or remove lines under the plan title row or between rows** → Style → **Comparison Table Colors** → **Row borders** (set weight to **0** or color opacity to **0%** to hide a line).
- **Taller table rows without changing fonts** → Style → **Row Spacing**.
- **Indent feature labels** → Style → **Comparison Table Text** → **Feature Row Indent** (or legacy Content field if still present on old saves).
- **Optional line under headings** → Style → **Headings accent line** → turn **Show accent line** on.
- **Opaque sticky column on mobile** → If **Table Box** uses solid **Theme** or **Custom** color, leave corner / category / feature label on **None** to inherit that fill; otherwise set those regions to **Theme** or **Custom** to match the page. **Always check** the table on a **narrow screen** after styling.
- **Table box background without changing sticky fills** → Set **Comparison Table Colors** explicitly for corner / category / feature label (not **None**) if you do not want coalescing.

---

## 4b. Mobile and horizontal scroll

- **Trigger:** Viewport width **narrower** than the table’s **minimum width**; the **scrollable region** (`.sw-feature-list__table-scroll`) shows a **horizontal scrollbar** (touch swipe on mobile).
- **Sticky column:** **Top-left corner**, **feature label** `th`, and **category label** `th` use **`.sw-feature-list__sticky-col`** (`position: sticky; left: 0`) so labels stay visible while plan columns move.
- **Stacking:** Corner header uses a **higher z-index** than body sticky cells. **Opaque** backgrounds on sticky cells prevent plan **icons/checkmarks** from showing through when scrolling.

---

## 5. Appendix: CSS hooks (partial)

- Root: `.sw-feature-list`, `.sw-feature-list__inner`, `.sw-feature-list__table-box`, `.sw-feature-list__table-scroll`
- Table: `.sw-feature-list__table`, `.sw-feature-list__category`, `.sw-feature-list__category-cell`, `.sw-feature-list__feature`, `.sw-feature-list__sticky-col`, `.sw-feature-list__cell`, `.sw-feature-list__plan-title`, `.sw-feature-list__plan-sub`
- Cell buttons: `.sw-feature-list__cell-buttons`
- Video background: `.sw-feature-list--has-bg-video`, `.sw-feature-list__video-wrap`

Use browser devtools on a live page for the full class list and inline `require_css` blocks.

---

## 6. Document version

**Doc last updated:** 2026-04-01 (**Master version 2026.04.01.15.44**). **Table Box Settings**; **Headings accent line** **width_px** (alias from **width_percent**); sticky **category** row markup; **`fl_bg_or_table_box`** (transparent sticky regions + solid table box); **field help_text** for mobile testing and background coalescing; **§4b** mobile / horizontal scroll. Prior **2026.04.01.14.05**: Override fonts, Row Spacing, row borders. Update this **.txt** first, then **SW AI Documentation.html** and public changelog as needed.