# SW Cards — AI Agent Reference **Module name:** SW Cards **Use this document when:** The user asks about the SW Cards HubSpot module—what it does, how to configure it, or how to change cards, icons, images, videos, buttons, or layout. --- ## 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** is a **generic card module** for non-blog content. It displays a grid or slider of cards, each with optional icon/image/SVG/video, rich text, and buttons. **Capabilities:** - **Repeater cards** — Add, remove, reorder cards. Each card can have: icon, image, SVG, or video; rich text; optional button. - **Module-level heading** — Optional heading and button above the cards. - **Description** — Optional rich text between heading and cards. - **CTA buttons** — Optional section-level buttons below the cards. - **Layout** — Grid or slider (when cards exceed visible per row). Cards per row configurable for XL, tablet, mobile. - **Styling** — Module background, card colors, borders, spacing, hover effects. **Use for:** Feature cards, service cards, team cards, product cards, any non-blog card layout. **Default state:** Three cards (image, image, icon); grid layout; no slider; theme background. Card 1: custom image 225×150; Card 2: image 150×150 with button; Card 3: icon (rocket) 150×150 with button. --- ## 2. Use Cases - **Feature overview** — Icon + heading + description + CTA per card. - **Service offerings** — Image or icon + rich text + button per card. - **Team members** — Image + name + bio per card. - **Product highlights** — Image or video + description + link per card. **When to choose another module:** - **Blog listing or related posts** → SW Blog Cards (listing) or SW Blog Related Posts (single post). - **Image beside content with headings/bullets/CTAs, alternating** → SW Pillar Section. - **Accordion with image per panel** → SW Pillar Accordion. --- ## 3. Related Modules | Module | Relationship | |--------|--------------| | **SW Blog Cards** | Blog posts only. For blog listing pages. | | **SW Blog Related Posts** | Blog posts only. For related posts on blog post pages. | | **SW Pillar Section** | Image/video beside content with headings, bullets, CTAs. One section per instance; add multiple for alternating. | | **SW Pillar Accordion** | Accordion panels with image that changes per panel. | --- ## 4. Module Structure From top to bottom: 1. **Heading** (optional) — Module-level heading and optional button. 2. **Description** (optional) — Rich text between heading and cards. 3. **Cards** — Grid or slider of cards. Each card: icon/image/SVG/video, rich text, optional button. 4. **CTA Buttons** (optional) — Section-level buttons below the cards. --- ## 5. Configuration Reference (Summary) **Content tab:** - **Heading** (group) — Heading text, size, display size, color, align, padding. - **Heading Button** (group) — Add button, text, link, style, icon. - **Description** — Rich text. - **Content style** (section) — Typography for Description: Default, Large (text balanced), Large (text full-width), Small, Blockquote. - **Cards** (repeater) — Per card: icon type (icon, image, svg, video), icon/image/svg/video fields, **Icon width** and **Icon height** (visible when Icon type = Icon or SVG; default 75px), rich text, **Content style** (per card: Default, Large balanced, Large full-width, Small, Blockquote), add button, button text/link/style. - **CTA Buttons** (group) — Add Button 1/2, text, link, style, alignment. **Style tab:** - **Module Settings** — Module background, text color, spacing. - **Cards Layout** — Card spacing, gutter, cards per row (XL, tablet, mobile), slider settings (when overflow), card colors, borders, icon settings, hover effect, text container padding. --- ## 6. Common Tasks - **Add or edit a card** → Content tab → Cards → Add item or edit existing. - **Change card icon/image/video** → Content tab → Cards → open item → Icon type, then configure Icon, Image, SVG, or Video fields. - **Change icon or SVG size (per card)** → Content tab → Cards → open item → Icon width, Icon height (visible when Icon type = Icon or SVG). Default 75px; set exact pixels for precise control. - **Change card text** → Content tab → Cards → open item → Rich text. - **Add card button** → Content tab → Cards → open item → Add button, set Button text, Link, Style. - **Use slider** → Style tab → Cards Layout → Use slider when overflow = ON. Ensure cards exceed Cards per row (XL). - **Change cards per row** → Style tab → Cards Layout → Cards per row (XL, Tablet, Mobile). - **Change module background** → Style tab → Module Settings → Module background. - **Change card colors** → Style tab → Cards Layout → Card colors. --- ## 6a. Slider Clipping (Troubleshooting) **Clipping can occur on smaller screens** when the slider shows too many cards per row for the viewport. Icons or card content may appear cut off at the left or right edges. **Fix:** Reduce the number of cards per row for the affected breakpoints: - **Style tab** → **Cards Layout** → **Cards Settings** - **Cards per row (Tablet)** — For 768px–991px screens. If clipping on tablets, set to a lower value (e.g. 2 or 3) or "Same as desktop" if desktop is already low. - **Cards per row (Mobile)** — For ≤767px screens. If clipping on phones, set to **1** (one card per row) for a single-column layout. The breakpoints are: XL (1200px+), Desktop (992px–1199px), Tablet (768px–991px), Mobile (≤767px). Adjust the breakpoint(s) where clipping occurs. --- ## 7. Document Version - **Module reference:** SW Cards (smithworks-2025). - **Doc last updated:** 2026-02-19. - **2026-02-19:** Slider clipping troubleshooting: when it occurs (smaller screens, too many per row), fix (reduce Cards per row for Tablet/Mobile). - **2026-02-16:** Content style for Description (section) and per card. - **2026-02-14:** Added icon_width, icon_height per card (Icon/SVG types); three default cards; default state update. - **2026-02-13:** Initial AI documentation. Use cases, related modules, configuration summary. **⚠️ Developer Note:** When updating this file, sync to `SW AI Documentation.html`. See `docs/PROCESS-MODULE-DOCUMENTATION-SYNC.md`.