# SW Cards Products — AI Agent Reference **Module name:** SW Cards Products **Use this document when:** The user asks about the SW Cards Products HubSpot module—what it does, how it differs from SW Cards, bullets, pricing, media per card, layout, or slider. --- ## Instructions for the AI Agent - **Unless the user explicitly provides you with direct HubSpot CLI access, assume you have no access to HubSpot.** 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). Use the **exact** names from the Configuration Reference. - **Not configurable via the module:** Say so clearly. Direct the user to **custom CSS** in their theme's custom CSS file (e.g. `custom-styles.css` for Sprocket Rocket themes). - **Support and bugs:** Direct the user to **https://smithworks.marketing/contact**. --- ## 1. Purpose and When to Use **SW Cards Products** is a **card grid (or slider)** for **non-blog** content where each card can include: - Optional **media** (icon, image, SVG, or video) per card—controlled with **Show card media** on each card. - **Headings** per card (repeater, same pattern as other SW modules). - A **bullet / feature list** per card (repeater with optional per-row bullet overrides). - Optional **pricing**: **Show Price** per card with **Price 1** and **Price 2** text; module-level **Price Field Toggle** adds a visitor pill to switch between Price 1 and Price 2 on cards that show pricing. **You do not need to turn on Price Field Toggle** for simple layouts—leave it **off** and use bullets only (or use pricing without the pill so both amounts can display per card help text in the editor). **Use for:** Pricing-style or plan comparison cards; product or package cards with feature bullets; **simple bulleted-list cards** without any pricing UI. **Default state (typical install):** Three cards; grid layout; module headings above cards; cards include media, headings, and bullet lists per field defaults. **Show Price** defaults off on cards unless the sample content turns it on—confirm in the editor for the portal. --- ## 2. SW Cards vs SW Cards Products | Topic | **SW Cards** | **SW Cards Products** | |--------|----------------|------------------------| | Body content | **Rich text** per card (flexible paragraphs, links, lists inside richtext) | **Structured bullets** per card (repeater + list styling); not a full richtext body field for the main feature list | | Pricing | No built-in price fields | Optional **Price 1 / Price 2**, **Show Price**, and **Price Field Toggle** (pill) at module level | | Module-level extras | Optional **Description** (richtext), **Heading** button, **CTA Buttons** below cards | **Headings** repeater above cards only; **no** module-level description or separate CTA strip—**CTAs are per card** (including price-slot buttons when pricing is used) | | When to pick **SW Cards** | Team/services cards with mixed richtext; icon + paragraph + one button; need section-level buttons under all cards | — | | When to pick **SW Cards Products** | — | Feature comparison rows, plan bullets, optional monthly/yearly (or similar) price switch, or **simple bullet-only cards** without touching **Price Field Toggle** | **Rule of thumb:** If the content is “icon/image + **bullet list** + maybe price,” use **SW Cards Products**. If it is “richtext story + optional button per card + maybe section CTAs,” use **SW Cards**. --- ## 3. Use Cases - **Plan or tier comparison** — Bullets per tier; optional dual price with visitor toggle. - **Product cards** — Image + title + bullet benefits + card CTA. - **Simple bulleted cards** — No pricing: leave **Show Price** off; ignore **Price Field Toggle**; fill **Bullets** only. **When to choose another module:** - **Blog posts as cards** → SW Blog Cards or SW Blog Related Posts. - **One image beside long copy (not a card grid)** → SW Pillar Section. - **Accordion with image per panel** → SW Pillar Accordion. - **Single rich text block per card without structured bullet repeater** → SW Cards. --- ## 4. Related Modules | Module | Relationship | |--------|----------------| | **SW Cards** | Generic cards with richtext per card; section CTAs; no built-in price/bullet repeaters like this module. | | **SW Blog Cards** | Blog posts only. | | **SW Blog Related Posts** | Related posts on post pages only. | | **SW Pillar Section** | Side-by-side section, not a multi-card grid. | --- ## 5. Module Structure (Top to Bottom) 1. **Module headings** (optional repeater) — Above the card row. 2. **Price Field Toggle** (optional UX) — When on, pill switches Price 1 vs Price 2 on cards with **Show Price**; **Price 1 Label** / **Price 2 Label** apply to the pill only. 3. **Cards** — Grid or slider; each card: optional media, optional pricing block, headings, bullets, optional buttons (including price-slot behavior when toggle + pricing align). --- ## 6. Configuration Reference (Summary) **Content tab:** - **Enable Module**, **Custom ID**, **Custom Classes** - **Headings** (repeater) — Per heading: Heading, Size, Display Size, Color, Align, responsive overrides (tablet/mobile alignment and display size), padding overrides, CSS class - **Price Field Toggle** — On = visitor pill for Price 1 vs 2 on cards that show pricing; **Price 1 Label** / **Price 2 Label** visible when toggle on - **Cards** (repeater) — **Card Title** (admin label); **Showcase (expand card)**; **Show card media** + icon/image/SVG/video fields; **Pricing** group (**Show Price**, **Price 1**, **Price 2**, color, display size, padding override fields); **Headings** (per card repeater); **Bullets** (repeater: text, optional **Override bullet** / **Item bullet type**); card-level style overrides where provided; **Price 1** / **Price 2** button groups when pricing is enabled **Style tab:** - **Module Settings**, **Module Background** (and video background when applicable) - **Content Colors** — Text colors for feature list and module wrapper; **Link Colors** (**Theme Defaults (auto)**, **On Dark Background**, **On Light Background**) for card content, module wrapper, and per-card override (feature list links) when override is on - **Cards Settings** — Spacing, columns per breakpoint, card colors, borders, **equal height** option, hover, etc. - **Feature list (bullets)** — Default list style for feature bullets on every card (list type, default icon/color, sizes); per-item overrides on each card - **Slider settings** — Use as slider when cards exceed cards per row; arrows, dots, autoplay, bounce --- ## 7. Common Tasks - **Add or edit bullets on a card** → Content → **Cards** → open card → **Bullets** repeater → add rows or edit **item** text. - **Card with bullets only (no pricing)** → Leave **Show Price** off on that card. **Price Field Toggle** can stay **off**—no need to configure pricing fields. - **Show one price or two prices** → Per card: **Show Price** on; fill **Price 1** / **Price 2**. Module-level **Price Field Toggle** on = pill for visitors; off = both lines show per editor/help text (no pill labels required). - **Change list bullet style globally** → Style tab → **Feature list (bullets)** → list type, default icon, sizes. - **Toggle media on a card** → Content → **Cards** → **Show card media**; then set icon type / image / SVG / video. - **Use slider** → Style → **Cards Settings** + **Slider settings** (when cards exceed cards per row; compare with SW Cards overflow behavior). --- ## 8. Slider Clipping (Troubleshooting) Same class of issue as **SW Cards**: too many cards per row on small viewports can clip slider content. **Fix:** Style → **Cards Settings** → reduce **Cards per row** for Tablet and/or Mobile (often **1** on mobile). --- ## 9. Document Version - **Module reference:** SW Cards Products (smithworks-2025). - **Doc last updated:** 2026-03-24. - **2026-03-24 (later):** Link Colors label set in Configuration Reference (Theme Defaults (auto), On Dark Background, On Light Background). - **2026-03-24:** Initial AI documentation. SW Cards comparison, optional **Price Field Toggle**, bullet-only use case, configuration summary. **⚠️ Developer Note:** When updating this file, sync to `SW AI Documentation.html`. See `docs/PROCESS-MODULE-DOCUMENTATION-SYNC.md`.