SW Module Documentation for AI Agents

This page is for AI agents (ChatGPT, Claude, Grok, Cursor, etc.) to understand Smithworks custom Sprocket Rocket modules. Share this URL with your AI or use the table of contents below to jump to a specific module.

SW Version Report

Use this section when the user asks about the Smithworks version report, portal report links, or phrases like Needs upgrade, Fields differ, Version mismatch, Not in master, or SW Version Note on a module row.

Marketer-facing reference (same substance, plainer wording): smithworks.marketing/sw-module-faqs#version-report — anchors #version-report-statuses, #fields-differ, #legacy-and-new-module, #before-you-approve-upgrade.

• Needs upgrade — Theme module is behind Smithworks master; a roll-down upgrade is available when the client and Smithworks agree.
• Fields differ — Module editor structure differs from master; after upgrade, saved content may need review (heroes, headers, footers, cards, blog modules are high impact).
• Version mismatch — Inconsistent version metadata inside the module folder; align files before treating the row as authoritative.
• Not in master — Module is theme-specific or a replacement (e.g. new pillar); compare related rows and follow SW Version Note text.
• Legacy vs new module — Do not delete or overwrite the legacy module while old pages depend on it; new work uses the replacement named in notes/report.
• SW Version Note — Parsed from a single line in module.html (first line only). Direct users to the FAQ link in that line for long-form context.

Do not point clients to internal repo paths or engineering-only process documents for these questions; use the FAQ URL above or this section.

Instructions for the AI Agent

• Session start: Ask “Are you starting a new theme, or do you need help with SW labeled modules?” Do not assume.
• Research and guide based on available data only. Never guess or extrapolate from patterns. Look up the documentation for each question. Give exact tab → group → field paths.
• Never guess — always look up. Use the exact terminology from the docs (e.g. Module Settings, not “Module Style Settings”; Spacing, not “section padding”). Do not give generic “look for X, Y, Z” advice.
• If you only have this page: You can direct users to smithworks.marketing/sw-module-faqs for more detail, but you will not have that page’s content. Use the Module Comparison & Use Case Quick Reference below to answer “which module?” questions.
• First, ask the user which module they are working on. Then determine the module type:
  • Sprocket Rocket modules (names usually start with SR, e.g. SR Hero 01, SR Two Col 01): Look at the Sprocket Rocket Documentation at https://docs.sprocketrocket.co/. That is where SR module information lives. Consult it when answering SR module questions. Direct the user there as appropriate. This page does not document SR modules.
  • Smithworks modules (names start with SW, e.g. SW Button, SW Text Headings): Use the sections below. Theme partials (not page modules), e.g. SW SEO Schema (JSON-LD in header.html), are documented in their own sections. If the user asks about an SW module that is not listed in the table of contents, direct them to request support via smithworks.marketing/contact (contact form).
• Unless the user explicitly provides you with direct HubSpot CLI access, assume you have no access to HubSpot. Answer only from this page (and any other docs the user provides). For SR modules, consult the Sprocket Rocket docs at https://docs.sprocketrocket.co/.
• When the user asks how to change something in an SW module, use the exact tab names, group names, and field labels from the Configuration Reference for that module.
• If a change cannot be done via module fields, say so and direct the user to custom CSS (e.g. custom-styles.css in Sprocket Rocket themes). Use the CSS classes in each module’s Appendix.
• Only recommend documented modules. Never invent module names (e.g. “SW Image & Text Group”). If a module is not documented, say so; offer closest alternatives; direct to smithworks.marketing/contact.
• Capability-based, not page-type-based: Describe modules by what they CAN do. Never say “for long pages only” or “you wouldn’t use it for 1–2 blocks.” All modules work for 1 or many instances.
• HubSpot UI questions (not SW module specific): When a client asks about the HubSpot interface, navigation, or how something works in the current HubSpot UI (e.g. where is Settings, how to add a module, how to change a page template), refer them to https://help.hubspot.com/. This page documents SW modules only; HubSpot’s Help Center covers the product UI.
• For support or bug reports: smithworks.marketing/contact.
• Fields and HTML: Rich text fields (richtext type) accept HTML, including <a>, <strong>, <em>. Examples: Content Area, Description, Post Body. Text fields (text type) do not accept HTML; plain text only. Examples: Heading, Button text, Title. Check the module’s Configuration Reference for the field type. Do not assume.
• Setup questions: When the user asks how to set up the theme, header, or footer, lead with UI-only steps (open page, click header, Edit global content, etc.). Do not lead with Design Manager, partials, or file paths. If the user cannot complete a step, offer UI troubleshooting first. Only provide file-level or Design Manager guidance if the user explicitly needs it or UI steps fail.
• Global footer popups (SW Popup Panel, SW CTA Popup): When the user cannot add a popup site-wide, do not tell them to open Design Manager or edit sw-site_footer.html first. Use SW Popup Panel → Site-wide: global footer (content editor) and First-Time Setup → Troubleshooting (UI-Only): Edit global content → SW Global Site Footer (try Hidden modules if missing) → add the module in the footer drag-and-drop area alongside SW Simple Footer → Publish global content. Design Manager / file paths only if UI steps fail or the theme has no footer DnD area.
• Page Body Class (Smithworks themes): When the user asks where to set Body Class for page-level targeting (e.g. SW Popup Panel Label & Body Class matching, or cta-popup-hide), do not default to Settings → Advanced. On Smithworks themes the field is in the page content editor: left sidebar Page contents (content tree) → expand Hidden modules → Body Class. See Page Body Class field (Smithworks themes). System page templates with a fixed <body> class may not expose this field.

Fields and HTML — Which Fields Accept HTML Tags

When a user asks “Can I add a link in this field?” or “Does this field support HTML?”:

• Rich text (Content Area, Description, Post Body, etc.): HTML allowed, including <a> links.
• Text (Heading, Button text, Title, Custom Class, etc.): Plain text only. No HTML.
• Rule: Check the module’s Configuration Reference for the field’s type. richtext = HTML allowed. text = plain text only.
• If the field type is not in the documentation, say you don’t have definitive information. Suggest a quick test (e.g. add <strong>test</strong> and see if it renders bold) or direct to smithworks.marketing/contact.

Global Theme Typography (Responsive)

Use this section when the user is confused by Theme Settings → Typography — especially when Responsive typography is checked and they see two sizes that look like duplicates (e.g. “Lead Paragraph Font Size” and “Paragraph Maximum Font Size” both 24px), or when changing one field doesn’t change the preview the way they expect.

Download (text): SW Global Theme Typography (Responsive) — AI Agent Reference (Text)

Where: Settings → Tools → Content → Themes & Modules → Themes tab → select your theme → Typography. Open any element (e.g. Lead Paragraph, H1, Display 1). Each group has font, a primary size in px, optional Advanced settings (line height, letter spacing), and Responsive typography.

Responsive typography OFF

The primary Font Size field is the fixed size for that typographic role (as implemented by the theme). No separate Min/Max range from this UI for that element.

Responsive typography ON

• Minimum Font Size — The smallest the type becomes (typically on narrow viewports).
• Maximum Font Size — The largest the type becomes (typically on wide viewports).
• Between those widths, the theme uses fluid scaling (interpolated size), not a single fixed px.
• Why two fields both say 24px: The main label (e.g. Lead Paragraph Font Size) and the Maximum may both show 24px because the “large screen” cap is 24px and the UI keeps them in sync. The meaningful second number for small screens is Minimum (e.g. 18px). If the user only changes the top field, preview at mobile width may barely change until they adjust Minimum or Maximum.
• Sync / refresh icons next to some fields usually mean those values are tied to theme defaults or related controls. After theme updates, re-check Typography and publish the theme.

What to change (common goals)

• Everything too big on desktop: Lower Maximum Font Size for that element (Lead Paragraph, H1, Display 1, etc.), or turn Responsive typography off and set one fixed Font Size.
• Too big on mobile only: Lower Minimum Font Size (and adjust Maximum if the range feels wrong).
• One fixed size, no scaling: Turn Responsive typography OFF; use the single Font Size field; verify at multiple breakpoints.
• Changes don’t show on the site: Publish the theme after editing Typography. Hard-refresh the page if needed.

SW modules: Content set to Large (text balanced) or Large (text full-width) uses Theme Settings → Typography → Lead Paragraph. Headings and hero/display text use H1–H6 or Display 1–4 — adjust the matching Typography group, not only the module field, when the issue is global type scale.

Notes for AI: Do not tell users that the main size and Maximum are always “the same field duplicated” — explain the min–max range and which field affects mobile vs desktop. Point to this section and the downloadable .txt when the user is stuck on Responsive typography.

Table of Contents

Module Comparison & Use Case Quick Reference

Use this table to route “which module for X?” questions. For expanded use cases and FAQs, see smithworks.marketing/sw-module-faqs.

Module	Layout (desktop)	Key Capabilities	Use For	When to Choose Another
SW Pillar Section	Side-by-side (image left or right beside content); stacks on mobile	Image/video beside content; headings, bullets, CTAs; image left or right per instance; add multiple for alternating	Image+content sections with structure; alternating layout; 1 or many sections	Simpler stacked image+text only → SW Image & Text
SW Image & Text	Stacked only (image above text); no side-by-side option	Simple image + rich text; responsive image; alignment (left/center/right of stacked block)	Simple image+caption; image+text block; standalone text	Need side-by-side, headings, bullets, CTAs, alternating → SW Pillar Section
SW Pillar Accordion	Accordion panels; image per panel	Expandable panels; image changes per panel; optional headings, content, CTAs per panel	FAQs; feature overviews; step-by-step guides	Need sections (not accordion) → SW Pillar Section. Need simple accordion without image → SW Magic Accordion
SW Blog Cards	Blog listing cards; slider/grid/infinite scroll	Pulls posts from blog or listing; slider, grid, or infinite scroll	Blog listing pages; website blog feed; tag-filtered posts	Related posts on post page → SW Blog Related Posts
SW Blog Related Posts	Related posts on single post page	Related posts by tag or automatic; displays on post template	Related posts on blog post page; “related articles” section	Blog listing or website page → SW Blog Cards
SW Cards	Generic card repeater; icon/image/video per card; rich text; buttons; optional per-card background/rich-text override	Repeater cards; icon/image/SVG/video per card; rich text; optional buttons; optional per-card Override card background and rich text; optional module description and section CTAs; new instances default 50px top / 40px bottom module padding	Feature cards; service cards; team cards; product cards; non-blog card layouts	Blog posts → SW Blog Cards or SW Blog Related Posts. Structured bullet lists + optional dual pricing per card → SW Cards Products. Image beside content with headings/bullets/CTAs → SW Pillar Section. Accordion with image per panel → SW Pillar Accordion
SW Cards Products	Card grid or slider; optional media, headings repeater, bullet repeater, optional pricing per card	Feature bullets per card; optional Price 1/Price 2 and Price Field Toggle (pill); card-level CTAs; equal height and slider options	Pricing/plan tables; product comparison bullets; simple bullet-only cards (no pricing required)	Rich text body per card + section-level CTAs under all cards → SW Cards. Blog posts → SW Blog Cards or SW Blog Related Posts. Single side-by-side section → SW Pillar Section
SW Simple Hero	Hero with heading, subheading, optional image (similar to SW Blog Post Hero)	Heading, subheading, optional image, CTAs	Website pages; landing pages	Blog post template hero → SW Blog Post Hero
SW Simple Header	Header; announcement bar; top bar; menu	Logo, menu, top bar, announcement bar	Site header	—
SW SEO Schema (partial)	In header.html; not a page module	JSON-LD Organization + WebSite in <head>; uses email footer + Brand Kit logo URL	Site-wide structured data / Rich Results	Not editable in page editor—see SW SEO Schema
SW Simple Footer	Footer; back to top	Logo, links, buttons, back to top	Site footer	—
SW Button	Theme-aligned buttons; repeater	Repeater buttons; theme styles	CTAs; multiple buttons	—
SW Blog Listing Hero	Featured image; post title; metadata (blog listing)	Featured post with image, title, metadata, summary, Read More	Blog listing pages (main index, tag pages, author pages)	Blog post template hero → SW Blog Post Hero; Website/landing hero → SW Simple Hero
SW Blog Post Hero	Featured image; post title; metadata (similar to SW Simple Hero)	Post featured image, title, metadata	Blog post templates	Website/landing page hero → SW Simple Hero
SW Blog Post Body	Post body content	Post body wrapper	Blog post body	—
SW Text Headings	Heading states; repeater	Repeater headings; size, color, alignment per heading	Section headings	—
SW Form	Standalone form; headings above form	HubSpot form; optional headings; Form Box Settings (background, border, field/button styling)	Form only; no image or content beside it	Form beside image/video/content (two columns) → SW Pillar Section (Secondary Column = Form)
SW CTA Popup	Popup overlay; bottom left or right	Simple popup; headline, body, optional thumbnail, optional button; time delay, scroll %, exit intent	Simple one-off popup; quick setup; one page or global footer for site-wide	Multiple variants; page-specific content; announcement banners; more positions → SW Popup Panel
SW Popup Panel	Popup overlay; 9 positions (bottom, top, corners, sides, modal)	Multiple variants; body class matching; per-variant triggers; announcement banners; thumbnail layout; panel size	Multiple popup variants; different content per page; announcement banners; maximum flexibility	Simple one-off popup; quick setup → SW CTA Popup
SW Quiz Simple	Single-column quiz UI; linear question flow	Configurable questions and weighted results; optional HubSpot form on results (embed code supplies form + portal IDs; Forms API submit)	On-page quizzes; assessments; lead capture after results	Plain form only → SW Form. Form beside content → SW Pillar Section (Form column)
SW Pillar Section (Form column)	Two columns; form beside image/video/content	Image, Video, Content, or Form as secondary column; primary has headings, bullets, CTAs	Form with image, video, or content beside it; form with more design elements	Form only (nothing beside it) → SW Form

Module Selection Clarifications

This section is updated as we find questions that are answered incorrectly. Module sections with clarifications here (e.g. SW Image & Text, SW Pillar Section) link to it.

User phrasing → correct module

If someone says…	Use this module
“Image on the left and content on the right”	SW Pillar Section
“Two columns with an image”	SW Pillar Section
“Image beside content, alternating”	SW Pillar Section
“Side-by-side image and text”	SW Pillar Section
“Image above text”	SW Image & Text
“Simple image + paragraph block”	SW Image & Text
“Stacked image and caption”	SW Image & Text
“Form only” / “Just a form”	SW Form
“Form beside image” / “Form with content beside it”	SW Pillar Section (Secondary Column = Form)
“Simple popup” / “Quick popup for one page” / “Popup on all pages”	SW CTA Popup
“Different popup per page” / “Multiple popup variants” / “Announcement banner”	SW Popup Panel
“Quiz” / “Assessment” / scored outcome + email on results	SW Quiz Simple — docs section; linear flow only
“Pricing table” / “plans with checkmarks” / “bullet list per column card”	SW Cards Products — docs section
“Service cards” with long richtext + buttons under the whole row	SW Cards — docs section
“JSON-LD” / “structured data” / “Organization schema” / “Google Rich Results” / wrong Organization.url in testing	SW SEO Schema (theme partial) — docs section; fix Marketing → Email → Footer addresses + Content → Brand → Logos → Logo URL

First-Time Sprocket Rocket Theme Setup Checklist

Use this when the user asks “How do I set up my theme for the first time?” or “What do I need to configure when setting up Sprocket Rocket?”

Do these in order. Brand Kit must be configured first—many theme settings and modules pull from it. Then complete 1b. Marketing: Email footer so SW Simple Footer can show the copyright company name on the website and so SW SEO Schema (JSON-LD in the header) can populate Organization name and address. Set Logo URL on the default logo in Content → Brand → Logos so schema Organization.url / WebSite use the correct canonical site (see SW SEO Schema → Brand: Logo URL).

In this section: Quickstart (Marketing User)· 1. Brand Kit· 1b. Marketing: Email footer (copyright name)· 2. Theme Settings· 2b. SW Theme Settings· 3. Header and Footer· 4. Blog Setup· 5. System Pages· 6. Quick Verification· Troubleshooting· Page Body Class· Developer Appendix· Global Theme Typography (Responsive)

Quickstart: Marketing User (No Design Manager)

Complete setup in 10–15 minutes using only the HubSpot UI. No Design Manager or file editing required.

1. Confirm modules are installed. SW modules should appear in the page editor when you add a section.
2. Activate the theme. Content → Website Pages → Create → Set as active theme (or Change theme if one is already set).
3. Brand Kit. Content → Brand (Brand Kit). Set colors, logo, fonts first if you have not already.
4. Marketing email footer (copyright company name + structured data). After Brand Kit: Settings (gear) → Marketing → Email → Configuration tab → Footer addresses → Create email footer (or edit an existing footer). Enter company name, full address, and country (e.g. United States of America maps to ISO US in schema). SW Simple Footer reads site_settings.company_name from this data for the copyright line—not from Settings → Account defaults → Company information. The same footer fields feed SW SEO Schema Organization name and PostalAddress. See 1b. Marketing: Email footer (copyright name).
5. Logo URL (canonical site for JSON-LD). In Content → Brand → Brand Kit → Logos, edit the default logo and set Logo URL to your homepage (e.g. https://www.example.com). This drives HubL company_domain for Organization.url / WebSite. The old path Settings → Website → Pages → Branding often redirects here—do not expect a separate “company domain” field on Brand Overview alone. See SW SEO Schema → Brand: Logo URL.
6. Configure Theme Settings. Settings → Tools → Content → Themes & Modules → Themes tab. Select your theme. Edit colors, fonts, buttons. For SW themes, scroll to SW Theme Settings at the bottom.
7. Check typography size (optional). If modules use “Large (text balanced)” or “Large (text full-width)” and the text looks too big, go to Theme Settings → Typography → Lead Paragraph. Reduce Paragraph Maximum Font Size (e.g. to 20–24px) or turn off Responsive typography. Same pattern applies to headings and hero text: if Display 1–4 or H1/H2 headings are too large, check Typography → Display 1–4 or H1/H2 and reduce Maximum Font Size or turn off Responsive typography.
8. Configure Header (global). Open any page using your theme. Click the header in the preview. Click “Edit global content” (or “Open in global content editor”). Set logo, navigation menu, CTA. Publish global content.
9. Configure Footer (global). Open any page. Click the footer. Click “Edit global content.” Configure footer modules. Publish global content.
10. Build a test page with SW modules. Create a new page. Add 3–5 SW modules (e.g. SW Simple Hero, SW Simple Header, SW Pillar Section). Configure and publish.
11. Publish and verify. Publish theme + global content + page. Confirm brand colors, logo, links, header, and footer look correct on desktop and mobile.

What success looks like: Theme is active; Theme Settings are editable; header and footer can be edited via “Edit global content”; SW modules appear in the editor; a test page renders correctly.

1. Brand Kit (do first)

• Primary Color — Main brand color
• Secondary Color — Secondary brand color
• First Accent Color — Maps to Tertiary in theme (used in modules)
• Second Accent Color — Optional; used in some themes
• Third Accent Color — Optional; used in some themes
• Primary Logo — Upload with alt text. In Content → Brand → Logos, set Logo URL on the default logo to your site homepage so header JSON-LD (SW SEO Schema) gets the correct company_domain.
• Body Font (optional) — Defaults to Roboto if not set
• Primary Font (optional) — Defaults to Roboto if not set

Where: Main menu → Content → Brand (Brand Kit)

What success looks like: Primary and secondary colors display correctly in theme; logo appears in header with alt text; fonts (if set) apply site-wide.

1b. Marketing: Email footer (copyright company name)

Do this after Brand Kit. The SW Simple Footer copyright line shows © [year] [company name] using HubSpot’s site_settings.company_name. Per HubSpot’s HubL documentation, that value comes from marketing email footer / office location settings (used for compliant email footers), not from Settings → Account defaults → Company information. Account defaults company details and email footer company details are separate in HubSpot.

Also required for SW SEO Schema (JSON-LD): The same Footer addresses record supplies site_settings.company_* used in the theme partial sw-seo-schema.html for Organization structured data: company name, street, city, state/region, zip, and country. Fill Country (e.g. “United States of America”) so addressCountry can output US. Full detail: SW SEO Schema.

Where (step by step):

1. Click the Settings gear icon (top right).
2. In the left sidebar, open Marketing and click Email.
3. Open the Configuration tab.
4. Open the Footer addresses sub-tab.
5. Click Create email footer (or edit an existing footer) and enter your company name and required address details. Save.

Reference: HubSpot help: Edit office location information in email footers. HubL variables: Email variables (site_settings.company_name).

What success looks like: At least one email footer exists with the company name saved. After publishing/refresh, live site pages using SW Simple Footer show the name after the copyright year.

AI instruction: When the user asks how to change the footer copyright company name, give this Marketing → Email → Configuration → Footer addresses path. Do not direct them only to Account defaults → Company information for site_settings.company_name. When they ask about missing Organization address / addressCountry or wrong JSON-LD company URL in Google Rich Results, use this same footer section for address/country and Content → Brand → Logos → Logo URL for the canonical site.

2. Theme Settings (after Brand Kit)

• Theme created/selected — Name your theme and confirm it’s standalone (not child theme)
• Link Color — Configure in Theme Settings → Colors
• Link Hover Color — Configure in Theme Settings → Colors
• Link Visited Color (optional) — In Theme Settings → Colors
• Color mapping verified — Primary, Secondary, Tertiary map correctly
• Border radius — Global border radius in Theme Settings
• Featured image — Global default featured image in Theme Settings
• Fonts (if custom) — Body, Headings, Form, Button fonts in Theme Settings
• Typography — Theme Settings → Typography. Controls font size, weight, line height for Base font (body text), H1–H6 (headings in modules), Display 1–4 (hero/display headings), Lead Paragraph (when Content style = Large), Small (when Content style = Small), Blockquote (when Content style = Blockquote). When Responsive typography is ON for any element, Minimum and Maximum Font Size define the fluid range (the main Font Size and Maximum often match — that is the wide-screen cap). Full explanation: Global Theme Typography (Responsive). If text is too large, reduce the Maximum or turn off Responsive typography to use the fixed Font Size.

Where: Settings → Tools → Content → Themes & Modules → Themes tab. Select your theme to edit it; Theme Settings (Link Color, Link Hover, etc.) are available when editing the theme.

What success looks like: You can see the Theme panel when editing your theme; publishing theme changes updates module styling site-wide; new pages created from the theme use these defaults.

2b. SW Theme Settings (at bottom of Theme Settings)

For themes with SW Theme Elements installed: Scroll to the bottom of Theme Settings. Where: Settings → Tools → Content → Themes & Modules → Themes tab. Select your theme, then scroll to the bottom. The SW Theme Settings group appears after the standard Sprocket Rocket groups. If you don’t see it, your theme may not have SW Theme Elements installed. Configure:

• Link Color (Dark Background) — Links on dark sections (e.g. dark hero). Used by SW modules when Link context = Dark.
• Link Hover Color (Dark Background) — Hover state for links on dark sections.
• Link Visited Color (Dark Background) (optional) — Visited state for links on dark sections.
• Link Text Decoration — Underline, None, or other for default links.
• Link Hover Text Decoration — Underline, None, or other for link hover.
• Show Button Focus Border — When off, removes focus outline from SW buttons for accessibility customization.

What success looks like: SW Theme Settings group is visible at bottom of Theme Settings; Link Color (Dark Background) and related fields affect SW modules on dark sections.

3. Header and Footer (after Theme Settings)

Header setup (UI-only):

1. Open any page that uses the SW theme.
2. Click the header area in the page preview.
3. Click “Edit global content” (or “Open in global content editor” when HubSpot prompts).
4. Set your logo (image + homepage link).
5. Select your primary navigation menu.
6. Update the CTA button (if present).
7. Publish global content.

Success checks: You see “Edit global content”; changing the header updates other pages; navigation can be managed via Settings → Website → Navigation.

If you can’t edit the header: Confirm the page uses the SW theme template; confirm the theme is active; try a different page.

Footer setup (UI-only):

1. Open any page that uses the SW theme.
2. Click the footer area in the page preview.
3. Click “Edit global content” (or “Open in global content editor” when HubSpot prompts).
4. Configure the footer module: logo, navigation, buttons, social icons, copyright line (year + company name from Marketing → Email footer), footer links, Back to Top, content colors, background.
5. Publish global content.

Success checks: You see “Edit global content”; footer edits appear site-wide.

If you can’t edit the footer: Same as header—confirm page template and theme; try a different page.

What success looks like: You see “Edit global content” when you click the header or footer; header/footer edits appear site-wide; navigation changes can be managed via Settings → Website → Navigation.

Developer notes (only if needed): If “Edit global content” does not appear, the header may not be built as global content. In SW themes, the header is a global partial (sw-site_header.html) containing SW Simple Header; the footer is sw-site_footer.html. Confirm the template includes the header/footer partial. In the Content sidebar, find SW Global Site Header or SW Global Site Footer under Hidden modules; hover and click or use the three dots (⋯).

4. Blog Setup (after Header and Footer)

Configure blog listing and blog post templates so the theme’s blog modules display correctly. Do this after header and footer are set up.

Where to start: Settings → Tools → Content → Blog. (In the new HubSpot UI, navigate to Settings, then Tools, then Content, then Blog.)

1. Create the blog if needed. If no blog exists, use “Create new blog” in the Current view dropdown.
2. Templates tab. Go to the Templates tab. Set up the Post template (e.g. SW Blog Single Post) and Listing template (e.g. SW Blog Listing). Assign them to the blog.
3. Edit the listing page. To configure the blog listing page (e.g. add SW Blog Cards, headings, layout): Go to your blog page (the main blog index URL) and use the Edit menu, or find it under Content → Blog. Edit the listing page directly to add and configure modules.
4. Edit blog post modules. To configure modules on individual blog posts (e.g. SW Blog Post Hero, SW Blog Post Body, SW Blog Related Posts): You must create at least one blog post first. Until a post exists, the post template modules are not editable in the UI. Create a draft post, then edit it to access and configure the post template modules.

Width of blog post modules: SW Blog Post Hero and SW Blog Post Body have fixed max widths (not user-editable): Hero = 1800px, Body = 1400px. These are hardcoded in the modules. To change them, custom CSS or module code edits are required.

Number of posts per listing page (important): In the blog’s Templates tab, set Number of posts per listing page. This controls how many posts HubSpot sends to SW Blog Cards. The value must match Posts to show + (Post start − 1). If misaligned: too low → fewer cards than expected; too high → posts skipped when advancing to the next page. See SW Blog Cards → Blog Listing Hero + Blog Cards Alignment for the full relationship, formula, and troubleshooting.

/blog/all (All Posts page): Blog Pagination can show a “Show all posts” link that goes to /blog/all. That page uses the sw-blog_all partial: a simple listing of up to 200 posts with client-side search (by title) and sort (date, title). CSS for this page lives in sw-overrides.css (SW Blog All section). The partial is included by SW Blog Listing when simple_list_page is true. HubSpot pagination limit: Numbered pagination stops at 7 pages; use the “All Posts” link to reach posts beyond that.

Related modules: SW Blog Cards (listing and website pages); SW Blog Post Hero (post hero/banner); SW Blog Post Body (post body content wrapper); SW Blog Related Posts (related posts on single post pages); Blog Pagination (custom module; numbered pages + optional “All Posts” link to /blog/all); sw-blog_all partial (simple listing for /blog/all).

What success looks like: Post and listing templates are assigned; blog listing page shows SW Blog Cards; individual posts show SW Blog Post Hero and SW Blog Post Body; Number of posts per listing page matches SW Blog Cards configuration.

5. System Pages (after Blog Setup)

Documentation: Download Here — Download SW System Pages — AI Agent Reference (Text)

Assign SW system page templates so error, subscription, password, search, and membership pages match your site’s header and footer. All 11 templates are included when the theme is added. During setup, complete only the system pages available for your Hub plan.

Hub plan requirements:

• 404, 500, Password prompt, Search results: Marketing Hub Professional/Enterprise, Content Hub Professional/Enterprise, or Legacy Marketing Hub Basic.
• Subscription pages (Subscription preferences, Backup unsubscribe, Subscriptions confirmation): Marketing Hub Professional/Enterprise or Content Hub Professional/Enterprise. Required for email marketing.
• Membership pages (Login, Register, Password Reset, Reset Request): CMS Hub Professional or Enterprise only. Assign only when using access-controlled content.
• Free tier: System page settings are not available. Skip this step.

Content settings (Settings → Content → Pages → System Pages): Select 404 error page (SW 404), 500 error page (SW 500), Password prompt page (SW Password Prompt), Search results page (SW Search Results).

Email settings (Settings → Marketing → Email → Subscriptions): Select Subscription preferences page (SW Subscription Preferences), Unsubscribe backup page (SW Backup Unsubscribe), Subscription update confirmation page (SW Subscriptions Confirmation).

Membership pages (CMS Hub Professional/Enterprise only): SW Membership Login, SW Membership Register, SW Membership Password Reset, SW Membership Reset Request. Assign via Memberships settings when using access-controlled content.

Templates live in sw-system-pages/. Edit default content in Design Manager. To edit footer content for system pages: Edit the partial directly (sw-partials/sw-site_footer.html), not on a page—system pages use the global footer partial.

What success looks like: 404, 500, password, search, subscription, and (if applicable) membership pages use SW templates; error and system pages match your site’s header and footer.

6. Quick Verification

Set the active theme (via HubSpot UI, recommended):

• To initially set an active theme (when one is not yet set): Go to Content → Website Pages (or Content → Landing Pages); click Create or Get started; on the theme selection screen, find the theme you want and click Set as active theme. That theme becomes the default for new pages.
• To change the active theme (when one is already set): Go to Content → Website Pages; click Create; click the Theme dropdown in the top right; choose Change theme; find the theme you want and click Set as active theme.
• Note: This only affects the default for new content. Existing pages and posts keep their current templates; change those separately (e.g. via the template swap option on each page).

Verify your setup:

• Create or open a test page
• Brand colors display correctly
• Logo appears in header with correct alt text
• Links use correct colors (Link Color and Link Hover from Theme Settings)
• Header and footer load and look correct

Notes for AI: Brand Kit first; Theme Settings next (including Link Color and Link Hover Color directly in Theme Settings → Colors). For themes with SW Theme Elements, configure SW Theme Settings at the bottom of Theme Settings (Link Color Dark Background, Link Hover Dark Background, Link Text Decoration, etc.). Header and footer next; then blog setup (Settings → Tools → Content → Blog; Templates tab; create first post to edit post modules); then system pages (Content → Pages → System Pages; Marketing → Email → Subscriptions). System pages: All 11 templates included with theme; complete only those available for client’s Hub (404/500/password/search require Marketing Hub Pro+ or Content Hub Pro+; subscription pages same; membership pages require CMS Hub Pro/Enterprise). Free tier: skip system pages. SW Blog Post Hero and SW Blog Post Body have fixed max widths (1800px and 1400px); not user-editable. Do not instruct users to map accent colors to links—have them configure Link Color and Link Hover Color in Theme Settings. For SR (non-SW) themes, direct users to Sprocket Rocket docs for header/footer configuration. Typography “too large” issues: If the user reports text (lead, headings, hero/display, blockquote, body, or small) is too big, direct them to Theme Settings → Typography → [relevant element]. For elements with Responsive typography ON, reduce the Maximum Font Size or turn off Responsive typography to use the fixed Font Size.

Troubleshooting (UI-Only)

Use these when the user cannot complete a step via the UI. Lead with UI fixes; only use Design Manager or file-level guidance if these fail.

• I can’t click the header/footer. Likely cause: Page not using SW theme; theme not active. Fix: Confirm the page template uses the SW theme; confirm the theme is active (Content → Website Pages → Create → Theme dropdown); try a different page.
• I don’t see Theme settings. Likely cause: Theme not selected or wrong path. Fix: Settings → Tools → Content → Themes & Modules → Themes tab → Select your theme.
• I don’t see SW modules in the editor. Likely cause: Theme may not have SW modules installed. Fix: Confirm theme has SW Theme Elements; check module availability when adding a section in the page editor.
• My theme changes didn’t apply. Likely cause: Not published; cache. Fix: Publish theme (and global content if header/footer changed); hard refresh (Cmd+Shift+R or Ctrl+Shift+R).
• Lead text is way too big (e.g. 80px or more). Likely cause: Theme Settings → Typography → Lead Paragraph has Responsive typography ON with a very high Paragraph Maximum Font Size. Fix: Typography → Lead Paragraph. Reduce Paragraph Maximum Font Size to 20–24px or turn off Responsive typography to use the fixed Lead Paragraph Font Size (default 20px).
• Hero heading / display text is huge. Likely cause: Typography → Display 1–4 has Responsive typography ON with high Maximum (e.g. 90px). Fix: Typography → Display 1 (or 2/3/4). Reduce Maximum Font Size or turn off Responsive typography.
• H1/H2 heading is too large. Likely cause: Typography → H1 or H2 has Responsive typography ON with high Maximum. Fix: Typography → H1 (or H2). Reduce Maximum Font Size or turn off Responsive typography.
• Blockquote, Small, or body text is too large. Same pattern: Typography → Blockquote, Small, or Base Font. Reduce Maximum Font Size or turn off Responsive typography.

Page Body Class field (Smithworks themes)

Use this when the user asks where to set the page body class (for example to match SW Popup Panel → Content Items → Label & Body Class, or to add cta-popup-hide).

Correct path (page editor, not page Settings):

1. Open the page or landing page in the content editor (not Design Manager).
2. In the left sidebar, open Page contents (the content tree / module list).
3. Expand Hidden modules.
4. Select Body Class and enter the class token (e.g. pricing-page-cta, ai-resource-popup, or cta-popup-hide). Use the same sanitized value as in Popup Panel when matching variants.
5. Publish the page.

Do not tell users to use Settings (gear) → Advanced as the default place for Body Class on Smithworks themes—that panel is for other advanced options; the editable Body Class for standard SW page templates comes from the theme header.html field and appears under Hidden modules in the content tree.

SW Popup Panel: Per-variant matching is documented under SW Popup Panel → Common Tasks and Blog posts and tag-* body classes (blog posts often already have tag-{slug} on <body>).

Exception: Some system page templates use a fixed <body> class and may not list Body Class under Hidden modules. If the field is missing, say the template may not expose it and direct to smithworks.marketing/contact.

Notes for AI: Keep this answer short: Page contents → Hidden modules → Body Class. Do not hedge with HubSpot “Advanced” unless the user confirms they are not on a Smithworks page template or the field is truly absent.

Developer Appendix

For developers only. Marketing users should not need this for the primary setup path.

• Theme file structure: theme.json defines theme metadata; fields.json maps to Theme Settings (including SW Theme Settings). Templates include partials via the include tag.
• fields.json: Theme-level fields appear in Theme Settings. SW Theme Settings group is defined in the theme’s fields.json and appears at the bottom when SW Theme Elements is installed.
• Global partials: Header = sw-site_header.html (contains SW Simple Header or equivalent); Footer = sw-site_footer.html (contains SW Simple Footer or equivalent). Included by base templates.
• Page header template: templates/header.html includes sw-seo-schema.html immediately after HubSpot’s standard header-includes output (the standard_header_includes token in the header file) for JSON-LD Organization + WebSite. See SW SEO Schema. The same file defines the page-level Body Class text field (export_to_template_context); editors set it under Page contents → Hidden modules → Body Class (see Page Body Class field).
• Optional CLI workflows: hs cms watch for local development; hs upload / hs fetch for deployment. See project docs for portal-specific config.

SW Pillar Section

Don’t use SW Pillar Section when: You only need a simple stacked image + paragraph and don’t need pillar structure, headings, bullets, or CTAs—use SW Image & Text instead.

Module Documentation: Download Here — Download SW Pillar Section — AI Agent Reference (Text)

Module name: SW Pillar Section
Use this document when: The user asks about the SW Pillar Section HubSpot module—what it does, how to configure it, or how to change a specific element (layout, images, video, content, bullets, CTAs, spacing, dividers, etc.).

In this section: Default state· Purpose and When to Use· Use Cases· Related Modules· Module Structure· Configuration Reference· Common Tasks· When to Use Custom CSS· Appendix· Document Version

Purpose and When to Use

The SW Pillar Section module provides:

• Two-column layouts: Primary content (headings, bullets, rich text, CTAs) plus a secondary column that can be Image, Video, Content (second content block), or None (full-width primary).
• Headings above the pillar — Optional headings above both columns.
• Primary content: Headings (above content), Bullets (numbered, bullet, custom icon, or custom image), Content Area, Override Text Color, CTA Buttons (with icon support and Tablet/Mobile alignment overrides).
• Secondary column options: Image (breakpoint overrides; Image as Background for a full-bleed cover in the media column vs an inline picture), Video (HubSpot, file, or embed), or Content (mirrors primary structure).
• Layout controls: Desktop/Tablet/Mobile column order, column widths, vertical alignment (top/middle/bottom).
• Module Settings: Spacing, Max Module Width, XL/LG/MD/SM height cascade with overrides, Column Vertical Alignment, Bottom Divider. List Setting and Content Area Setting apply to both content columns.

Use it for image+text, video+text, two content columns, or full-width content.

Use Cases

Capabilities: Image or video beside content; headings, bullets, rich text, CTAs; image left or right per instance; add multiple instances for alternating layout.

Use for: Any number of sections (1, 2, or many). Works on short pages, long pages, and everything in between.

Alternating pattern: Add multiple SW Pillar Section modules. Set Desktop Column Order = “Secondary on Left” on one instance, “Secondary on Right” on the next. Repeat.

Structure: One section per module instance (no repeater). Add more instances for more sections.

When to choose SW Image & Text instead: When you need only simple image + rich text, with no headings, bullets, or CTAs.

When to choose SW Pillar Accordion instead: When you need accordion panels with an image that changes per panel (FAQs, feature overviews).

Do NOT say: “For long pages only,” “you wouldn’t use it for 1–2 blocks,” “for pillar pages only.”

Related Modules

Module	Relationship
SW Image & Text	Simpler; image + rich text only. No headings, bullets, CTAs.
SW Form	Use when form only (nothing beside it). Pillar Section with Secondary Column = Form when form needs to sit beside image/video/content.
SW Pillar Accordion	Accordion with image per panel. Different layout.
SW Cards	Generic card repeater for non-blog content; richtext per card. Different structure.
SW Cards Products	Card grid with bullet repeater per card and optional pricing. Different structure.

Module Structure (What You See on the Page)

1. Headings (above pillar) — Optional, above both columns.
2. Main row — Two columns (or one when Secondary Column = None): Primary (headings, bullets, content area, CTAs); Secondary (image, video, or content).
3. Bottom Divider — Optional (Style tab → Module Settings).

Breakpoints: Desktop ≥992px; Tablet 768–991px; Mobile ≤767px. Mobile always stacks.

Configuration Reference

The module has Content and Style tabs. Group and field names match the HubSpot editor.

Content Tab

• Enable Module (toggle) — When ON, the module renders. When OFF, the module outputs nothing. Use to keep the module in the page flow but hide it from view. Default: ON.
• Custom ID / Custom Classes — Optional.
• Headings (above pillar) (repeater) — Headings above both columns. Per heading: Heading, Size, Display Size, Color, Align; Override Text Alignment (Tablet/Mobile) and Text Alignment; Override Tablet/Mobile Display Size; Override Padding, Padding Top/Bottom (px), CSS Class.
• Content Area Group — Headings (above content), Bullets, Content Area, Content style (Typography for Content Area and section text: Default, Large (text balanced), Large (text full-width), Small, Blockquote. When Large (text balanced) or Large (text full-width), applies Theme Settings → Typography → Lead Paragraph), Override Text Color, CTA Buttons (Add Button 1/2, Button text/link/style, Add Icon, Icon, Button Alignment with Tablet/Mobile overrides).
• Secondary Column — Image, Video, Content, or None (full width).
• Secondary Column (Image) — When Image: Extra Large Desktop Image (default: pillar-section-placeholder.jpg), Override Desktop/Tablet/Mobile Image, Image as Background. Off: normal inline image (respects padding and corner radius). On: image as background on the secondary column — on tablet and desktop it fills the full width and height of that column (object-fit cover). Use Extra Large Desktop Background Position and per-breakpoint Background Position when overrides are on. Override Media Border Radius / Image Corner Radius: Style tab → Secondary Column Settings.
• Secondary Column (Video) — When Video: Video Type (HubSpot, file, embed), HubSpot Video / Video File / Embed Field, Video Poster.
• Secondary Column (Content) — When Content: Same structure as Content Area Group (Headings with responsive alignment/display size overrides, padding, CSS class; Bullets, Content Area, CTAs).

Style Tab

• Module Settings (collapsed) — Spacing (default: margin 0px top/bottom; padding 50px top/bottom, 25px left/right); Max Module Width (Default/Small/Large/Full Width/Custom, Max Module Width (px) when Custom); XL Module Height (Minimum Height, Height (px), Vertical Alignment); Override Desktop/Tablet/Mobile Height (toggle, Minimum Height, Height (px), Vertical Alignment); Column Vertical Alignment; Bottom Divider (thickness, width %, color, style).
• Column Width Settings — Desktop/Tablet Column Width, Desktop/Tablet/Mobile Column Order.
• Secondary Column (Media) Setting — Desktop/Tablet/Mobile Column Order. Defaults: Desktop = Secondary on Right/Bottom; Tablet = Inherit; Mobile = Secondary on Bottom. Override Media Border Radius (toggle; applies to image and video). When Image: Image as Background (same behavior as Content tab toggle), Image Corner Radius (when Override on). When Video: Video Corner Radius (when Override on).
• Content Settings — Text Alignment for content area; Override Tablet/Mobile Text Alignment.
• List Setting — List Type (Numbered, Bullet, Custom Icon, Custom Image); Default Bullet Icon/Image; Bullet List Font Size, List Item Bottom Spacing, List Left Padding, Space Between Icon and Text.

Common Tasks (“How Do I…”)

• Change headings above the pillar → Content → Headings (above pillar). Use Override Text Alignment (Tablet/Mobile) and Override Tablet/Mobile Display Size for breakpoint-specific alignment and size.
• Change main content heading → Content → Content Area Group → Headings (above content). Same responsive overrides as above-pillar headings.
• Change bullet list items → Content → Content Area Group → Bullets. Use Override bullet for custom icon/image per item.
• Change list type → Style → List Setting → List Type.
• Change content area text → Content → Content Area Group → Content Area.
• Change content typography (lead, small, blockquote) → Content → Content Area Group → Content style. Options: Default, Large (text balanced), Large (text full-width), Small, Blockquote. When using sections, Content style can be set per section. Large options use Theme Settings → Typography → Lead Paragraph for font size.
• Change content area text alignment → Style → Content Settings → Text Alignment (Override Tablet/Mobile for breakpoint-specific).
• Add/edit CTA buttons → Content → Content Area Group → CTA Buttons.
• Switch secondary column → Content → Secondary Column (Image, Video, Content, or None).
• Change secondary image → Content → Secondary Column (Image).
• Make the image fill the secondary column (edge to edge, background style) → Content → Secondary Column (Image) → Image as Background ON (or Style → Secondary Column (Media) Setting). Adjust Background Position fields if the crop is wrong. OFF keeps a standard inline image in the column.
• Change column order (desktop/mobile) → Style → Column Width Settings or Secondary Column (Media) Setting → Desktop/Mobile Column Order.
• Change column width → Style → Column Width Settings → Desktop/Tablet Column Width.
• Change vertical alignment → Style → Module Settings → Column Vertical Alignment.
• Change max module width → Style → Module Settings → Max Module Width.
• Change module height or spacing → Style → Module Settings (XL Module Height; Override Desktop/Tablet/Mobile Height for breakpoint-specific height). Spacing default: margin 0px top/bottom; padding 50px top/bottom, 25px left/right.
• Change image or video corner radius → Style → Secondary Column Settings → Override Media Border Radius (toggle). When ON: Image Corner Radius (when Image) or Video Corner Radius (when Video). When OFF, uses global theme border radius.
• Add bottom divider → Style → Module Settings → Bottom Divider.

When to Use Custom CSS

Use custom CSS when the change cannot be done via Content or Style fields. Add overrides in your theme’s custom CSS file—for Sprocket Rocket themes, usually custom-styles.css. Use the CSS classes in the Appendix below.

Appendix: CSS Classes and Selectors

Element	Class(es)	Notes
Module wrapper	.sw-pillar, .sw-pillar-section	Plus custom_classes if set; id = Custom ID if set.
Top headings	.sw-pillar__top-headings, .sw-pillar__top-heading
Heading wrapper (alignment)	.sw-pillar__heading-wrap	Uses --th-wrap-justify-default, --th-wrap-justify-md, --th-wrap-justify-sm for responsive justification.
Main row	.sw-pillar__row	Grid; stacks on mobile.
Primary content	.sw-pillar__content
Secondary column	.sw-pillar__content-secondary
Content inner	.sw-pillar__inner	Wraps headings, list, content area, CTAs.
Headings above content	.sw-pillar__headings, .sw-pillar__heading
Bullet list	.sw-pillar__list	.sw-pillar__list--numbered, --bullet, --custom_icon, --custom_image
Media (image/video)	.sw-pillar__media	When Image as Background, column stretches; data-bg="true" on .sw-pillar.
Image (inline)	.sw-pillar__picture, .sw-pillar__img	When Image as Background is OFF.
Background image carrier	.sw-pillar__bg	When Image as Background is ON.
CTA area	.sw-pillar__cta	data-cta-align, data-cta-md-align, data-cta-sm-align
Single/two columns	.sw-pillar--single-column, .sw-pillar--two-columns

Breakpoints: Desktop ≥992px; Tablet 768–991px; Mobile ≤767px.

Document Version

Module: SW Pillar Section (smithworks-2025). Doc last updated: 2026-03-25. 2026-03-25: Image as Background: documented inline vs full-bleed secondary column (tablet/desktop cover; Content + Style tab; background position; appendix data-bg, .sw-pillar__bg). Marketer FAQ on SW Module FAQs. 2026-02-24: Module Settings Spacing default: padding 50px top/bottom, 25px left/right; margin 0px. Override Media Border Radius for both image and video; Image Corner Radius (when image); Video Corner Radius (when video). Enable Module toggle (Content tab, first field); when OFF, module outputs nothing. 2026-02-16: Content Area Setting renamed to Content Settings; added common task for content area text alignment. 2026-02-14: Image column default changed to pillar-section-placeholder.jpg. 2026-02-13: Added Use Cases and Related Modules; capability-based language; alternating pattern; do NOT say page-type limits. 2026-02-12: Button Size (Small/Default/Large) in primary and secondary column CTA button repeaters. When the module changes materially, this page is updated; use this URL to always have the latest version.

SW Blog Cards

Module Documentation: Download Here — Download SW Blog Cards — AI Agent Reference (Text)

Module path: smithworks-2025/sw-modules/SW Blog Cards.module
Use this document when: The user asks about the SW Blog Cards HubSpot module—what it does, how to configure it, slider vs. infinite scroll, blog listing vs. website behavior, tag filter, empty state, or card styling. For related posts on blog post pages, use SW Blog Related Posts.

In this section: Default state· Overview· Related Modules· Context-Specific Behavior· Blog Listing Hero + Blog Cards Alignment· Pagination and Reaching More Posts· Slider vs. Grid vs. Infinite Scroll· Configuration Reference· Common Tasks· When to Use Custom CSS· Appendix· Document Version

Overview

SW Blog Cards displays blog posts in a grid or slider layout. It is used on blog listing pages and website or landing pages only. For related posts on blog post pages, use SW Blog Related Posts instead.

SW Blog Cards adapts its behavior based on where it is placed:

• Blog listing page: Uses the listing’s posts; supports HubSpot pagination (Posts to show = 0) or manual slice.
• Website or landing page: Fetches posts from the selected Blog; supports infinite scroll or grid.

Critical: Slider and infinite scroll are mutually exclusive. To use the slider, turn off Use infinite scroll. If the user wants the slider but doesn’t see it, they must disable infinite scroll first.

Related Modules

Module	Relationship
SW Blog Related Posts	For related posts on blog post pages. SW Blog Cards is for listing/website only.
SW Cards	Generic card repeater for non-blog content. SW Blog Cards is for blog posts only.
SW Cards Products	Manual card grid with bullets/pricing; not blog-driven. SW Blog Cards is for blog posts only.

Context-Specific Behavior

Blog Listing Page

When the module is on a blog listing template (e.g. main blog index):

• Post source: Uses contents — the posts HubSpot provides for the listing.
• Tag Filter: Optional. If set, filters the listing’s posts to those with the selected tag.
• Posts to show = 0: Uses HubSpot’s built-in pagination (shows all posts with HubSpot pagination controls).
• Posts to show > 0: Slices the listing to show that many posts (respects Post start).
• Infinite scroll: Ignored on blog listing pages. The module does not support infinite scroll on listing pages.
• Slider: Available when Use as slider is ON and posts exceed Cards per row (XL). Requires infinite scroll OFF.
• Posts-per-page limitation: HubSpot’s contents only contains the number set in Marketing → Website → Blog → [Your Blog] → Templates → Number of posts per listing page. Max displayed = that setting. With Post start (offset): displayed = posts per page − (post start − 1). Blog setup: Set HubSpot posts per page = Posts to show + (Post start − 1). Example: 12 cards + 1 hero offset → set 13.
• Post start first page only: When ON (default), offset applies only on page 1. Use when SW Blog Listing Hero shows on first page only—avoids skipping a post on page 2+ where the hero is not present. When OFF, offset on every page.

Blog Listing Hero + Blog Cards Alignment

Relationship: SW Blog Listing Hero shows one post (typically the featured/first post) on the first page. SW Blog Cards shows the remaining posts in a grid. Post start = how many posts to skip (offset). If hero shows post 1, cards need Post start = 2 to begin at post 2. HubSpot “Number of posts per listing page” = total posts HubSpot sends in contents. This must equal Posts to show (in cards) + offset.

Formula: HubSpot posts per page = Posts to show + (Post start − 1)

Hero shows	Post start	Example (12 cards)	HubSpot setting
Post 1	2	12 cards + 1 hero	13
Post 2	3	12 cards + 2 (hero + 1 skipped)	14
No hero	1	12 cards	12

Post start first page only: When the hero shows only on the first page, Post start first page only must be ON. Otherwise page 2+ will incorrectly skip posts (hero is not present, but offset still applies). When OFF, offset applies on every page—use only when hero shows on every page, or when there is no hero.

Misalignment problems:

• Blog setting too LOW: Blog Cards won’t show all the posts selected in Post Display Settings. HubSpot sends fewer posts than cards need. Fix: Increase HubSpot “Number of posts per listing page” to Posts to show + (Post start − 1).
• Blog setting too HIGH: When the user advances to the next page, posts are skipped. HubSpot sends more posts than the template displays; the “extra” posts on page 1 are never shown; page 2 starts after them. Fix: Decrease HubSpot “Number of posts per listing page” to match Posts to show + (Post start − 1).

Troubleshooting: “Why fewer cards than Posts to show?” → Blog setting too low. “Why do posts disappear on page 2?” → Blog setting too high, or Post start first page only = OFF when hero is first-page-only. “Hero shows first post, 12 cards” → Post start = 2, Post start first page only = ON, HubSpot = 13. “No hero” → Post start = 1, HubSpot = Posts to show.

Website or Landing Page

When the module is on a website page or landing page:

• Post source: Fetches from the Blog field (Content tab). Select the blog to pull from.
• Tag Filter blank: Shows all recent posts from the selected blog.
• Tag Filter set: Shows only posts with the selected tag.
• Infinite scroll: Supported. Use infinite scroll ON for On scroll or Load more button.
• Slider: Available when Use as slider is ON and posts exceed Cards per row (XL). Requires infinite scroll OFF.

Pagination and Reaching More Posts (Blog Listing)

Blog Pagination is a custom module (not SW) that appears with SW Blog Cards on the blog listing template.

7-page limit: HubSpot numbered pagination stops at 7 pages. Posts beyond page 7 are not reachable via numbered links.

Options for more posts:

• Increase posts per page — Fewer pages, more posts per page. Still limited to 7 pages total.
• Enable “Show all posts” link — Blog Pagination can show a link to /blog/all, which displays a simple listing of up to 200 posts.

Show all posts page (/blog/all): Uses the sw-blog_all partial (in sw-partials/). Title search — Client-side search by post title. Sort options — Date (newest/oldest), Title (A–Z, Z–A). CSS in sw-overrides.css (SW Blog All section).

Slider vs. Grid vs. Infinite Scroll

Display modes:

• Grid — Default. Posts wrap into rows. Always available.
• Slider — Use as slider = ON and infinite scroll = OFF and posts > Cards per row (XL). Slider settings are hidden when infinite scroll is ON. User must turn off infinite scroll to see/use slider.
• Infinite scroll — Use infinite scroll = ON (website/landing only). Load trigger: On scroll or Load more button. Chunks revealed progressively.

If the user wants the slider but doesn’t see it:

1. Turn off Use infinite scroll. Content tab → Post Display Settings → Use infinite scroll = OFF.
2. Ensure Use as slider = ON. Style tab → Slider settings → Use as slider.
3. Ensure there are more posts than Cards per row (XL). Slider only activates when posts exceed the visible cards per row.

Slider settings group is hidden when Use infinite scroll is ON. The user cannot configure arrows, dots, autoplay, or bounce until infinite scroll is disabled.

Infinite scroll: Load trigger: On scroll (Intersection Observer) or Load more button. Load more button: Text, style (all Sprocket Rocket options), size, Add icon, Icon. Default: “Load More Posts”, Outline Primary, Chevron Circle Down icon. Chunk size = Posts to show. Max posts (default 24).

Tag Filter: Content tab → Tag Filter. Blank = all posts. Tag selected = filter by that tag.

Empty state: When no posts match (e.g. tag with zero posts), a centered message box appears: “Check back later for our latest content.” Box uses card-like styling.

Configuration Reference

Post Display Settings (Content tab): Posts to show, Post start, Post start first page only (offset on page 1 only when hero present), Use infinite scroll, Max posts, Load trigger, Load more button.

Content Colors (Style tab, 3rd group): Card content text (Theme defaults, Primary, Dark, Light, Custom), Custom Text Color when Custom, Card content links (Theme Defaults (auto), On Dark Background, On Light Background). Card content links applies only when Read More = simple link. Content Area text and Content Area links (for rich text below cards) with same text options; Content Area Link Colors uses the same three link-contrast options.

Content Area Settings (Style tab): Text align, Override Tablet/Mobile align; Spacing, Override Tablet/Mobile spacing for the Content Area (rich text below cards).

Cards Layout (Style tab): Cards per row (XL/Desktop/Tablet/Mobile), Card Spacing, Card Colors (Card Background only), Card Border Settings, Tags Settings, Text Box Spacing, Enable Hover Effect, Enable Card as Link. When Enable Card as Link is ON, the entire card is a link; title, summary, and meta stay plain text; Read More (simple link) uses link color.

Slider Settings (Style tab) — Visible only when Use infinite scroll = OFF: Use as slider, Show slider arrows, Custom arrows, Show slider dots, Auto advance, Slide bounce, Seconds between slides.

Common Tasks (“How Do I…”)

• Show related posts on a blog post → Use SW Blog Related Posts on the blog post template instead of SW Blog Cards.
• Use the slider → Content → Post Display Settings → Use infinite scroll = OFF. Style → Slider settings → Use as slider = ON. Ensure more posts than Cards per row (XL).
• Slider not showing / Slider settings missing → Turn off Use infinite scroll. Slider settings are hidden when infinite scroll is ON.
• Load more posts on scroll → Content → Post Display Settings → Use infinite scroll = ON, Load trigger = On scroll.
• Load more button instead of scroll → Content → Post Display Settings → Use infinite scroll = ON, Load trigger = Load more button. Configure Load more button (text, style, icon).
• Filter by tag → Content → Tag Filter → Select tag.
• Change cards per row → Style → Cards Layout → Cards per row (XL, Desktop, Tablet, Mobile). Also affects slider slides.
• Change Read More button → Content → Post Card → Read More (text, style, size, icon).
• Change card text or link colors → Style → Content Colors → Text Color, Custom Text Color, Link Colors (Theme Defaults (auto), On Dark Background, On Light Background). Link Colors applies only when Read More = simple link.
• Change content area (below cards) text or links → Style → Content Colors → Content Area text, Content Area links.
• Make entire card clickable → Style → Cards Layout → Enable Card as Link = ON. Title, summary, meta stay plain text; Read More uses link color.
• Use HubSpot pagination on blog listing → Content → Post Display Settings → Posts to show = 0.
• Skip hero on page 1 only → Content → Post Display Settings → Post start = 2 (or N), Post start first page only = ON. Set HubSpot “Number of posts per listing page” = Posts to show + 1 (e.g. 13 for 12 cards + 1 hero).

When to Use Custom CSS

Use custom CSS when you need to: change card layout or spacing beyond Cards Layout fields; style the empty-state message beyond card-like styling; override Blaze Slider appearance beyond Slider settings; target specific breakpoints for cards per row or spacing; add hover effects or transitions beyond Enable Hover Effect. Place overrides in the theme’s custom-styles.css. Use the CSS classes in the Appendix.

Appendix: CSS Classes and Selectors

Element	Class(es)	Notes
Module wrapper	.sw-blog-cards	Plus data-instance, custom_classes, Custom ID. Modifiers: .sw-blog-cards--has-bg-video
Inner	.sw-blog-cards__inner	Content wrapper
Headings	.sw-blog-cards__headings, .sw-blog-cards__heading-wrap, .sw-blog-cards__heading
Grid	.sw-blog-cards__grid	Row with row g-0; row-gap for vertical spacing
Slider	.sw-blog-cards__slider, .blaze-slider, .blaze-track, .blaze-arrow, .blaze-pagination	Blaze Slider library
Infinite scroll	.sw-blog-cards__infinite-scroll, .sw-blog-cards__chunk, .sw-blog-cards__chunk--hidden, .sw-blog-cards__sentinel
Load more	.sw-blog-cards__load-more-wrap, .sw-blog-cards__load-more	Button or simple-link
Card column	.sw-blog-cards__col	Per-card column
Card	.sw-blog-cards__card	Article wrapper
Card image	.sw-blog-cards__card-image
Card content	.sw-blog-cards__card-content
Card tags	.sw-blog-cards__card-tags, .sw-blog-cards__card-tag
Card heading	.sw-blog-cards__card-heading
Card summary	.sw-blog-cards__card-summary
Card meta	.sw-blog-cards__card-meta	Author/date
Read more	.sw-blog-cards__read-more	a.simple-link or span.simple-link when card is link
Content area	.sw-blog-cards__content-area	Rich text below cards; text/link colors from Content Colors
Card link context	[data-link-context="dark"], [data-link-context="light"]	On .sw-blog-cards__card when Link Colors = On Dark Background or On Light Background (stored values dark / light)
CTA	.sw-blog-cards__cta	Buttons below cards
Empty state	.sw-blog-cards__empty-state-wrap, .sw-blog-cards__empty-state, .sw-blog-cards__empty-state__text	When no posts match

Document Version

Module: SW Blog Cards (smithworks-2025). Doc last updated: 2026-03-24. 2026-03-24: Link Colors dropdown labels (Theme Defaults (auto), On Dark Background, On Light Background); appendix note on data-link-context. 2026-02-24: Blog Listing Hero + Blog Cards Alignment (relationship, formula, misalignment problems, troubleshooting); Pagination and Reaching More Posts (7-page limit, show all posts, /blog/all). Posts-per-page limitation; Post start first page only. 2026-02-12: Content Colors (Card content text/link, Content Area text/link); Content Area Settings; Enable Card as Link; Card content links applies only when Read More = simple link; Read More link colors when card is link. 2026-02-06: Initial AI documentation. Context behavior, slider vs infinite scroll, tag filter, empty state.

SW Blog Listing Hero

Module Documentation: Download Here — Download SW Blog Listing Hero — AI Agent Reference (Text)

Module path: smithworks-2025/sw-modules/SW Blog Listing Hero.module
Use this document when: The user asks about the SW Blog Listing Hero HubSpot module—what it does, hero configurations (Banner Above, Banner Background, Pillar Style), post source, Read More button, or design settings. Used only on blog listing pages; for blog post hero use SW Blog Post Hero; for website/landing hero use SW Simple Hero.

In this section: Default state· Overview· Hero Configurations· Post Source· Configuration Reference· Common Tasks· Related Modules· Hero Module Comparison· Document Version

Overview

SW Blog Listing Hero is the hero section on blog listing pages (main blog index, tag pages, author pages). It shows a featured post’s image, title, metadata (tags, author, date), optional summary, and a Read More button. It uses the most recent post from the listing or a selected post. Used only on blog listing templates (e.g. SW Blog Listing), not on blog post pages (use SW Blog Post Hero) or website/landing pages (use SW Simple Hero).

Hero Configurations

• Banner Image Above — Image above content; stacked layout.
• Banner Image as Background — Image as full-bleed background; content overlays.
• Pillar Section Style — Two-column layout (image left, content right).

Text box vertical position (Banner Image as Background): Controlled by Module Settings > Spacing (padding, default bottom 50px) and Module Settings > XL Module Height > Vertical Alignment (Top/Middle/Bottom, default Bottom).

Post Source

• Data — Optional. Select a specific blog post to feature. When blank, uses the most recent post from the listing.
• Show only on first page — When enabled, the hero is hidden on paginated listing pages (page 2+).

Configuration Reference

Content tab: Custom ID, Custom Classes; Enabled; Show only on first page; Data (post picker); Tags (Show tags, Text before tags, Link tags to tag pages); Post Heading (Size, Display Size, Color); Show author, Text before author line, Include date, Include time; Show post summary, Lead text; Read More Button (Enabled, Button Style, Button Text, Link, Button Size, Add icon).

Style tab: Module Settings (Spacing, Max Module Width, XL Module Height with Vertical Alignment, Layout, Container Width); Module Background Settings (Background Option: Blog Featured Image, Theme Color, Custom Color, Gradient, Image, Video); Content Colors; Blog Image Display (Hero Configuration, Override Image Border Radius); Text Box Settings; Module Background Video (Content tab, when Video selected).

Common Tasks (“How Do I…”)

• Feature a specific post → Content → Data → select the blog post.
• Hide hero on page 2+ → Content → Show only on first page = ON.
• Change hero layout → Style → Blog Image Display → Hero Configuration (Banner Above, Banner Background, Pillar Section Style).
• Show or hide tags/author/summary → Content → Tags, Show author, Include date, Show post summary.
• Change Read More button style → Content → Read More Button → Button Style (Primary, Secondary, Tertiary, Simple Link).
• Change text box vertical position → Style → Module Settings → XL Module Height → Vertical Alignment (Top/Middle/Bottom).

Related Modules

Module	Use for
SW Blog Post Hero	Blog post template hero
SW Simple Hero	Website/landing page hero
SW Blog Cards	Blog listing cards below hero

Hero Module Comparison

Module	Use for	Page type
SW Blog Listing Hero	Featured post with image, title, metadata, summary, Read More	Blog listing (index, tag, author pages)
SW Blog Post Hero	Post’s featured image, title, post meta	Blog post (single post)
SW Simple Hero	Heading, subheading, optional image, CTAs	Website/landing pages

Document Version

Module: SW Blog Listing Hero (smithworks-2025). Doc last updated: 2026-02-14. 2026-02-14: Added AI documentation with sample demo; hero comparison table; configuration reference aligned with current fields (author/date/time, no avatar; Text before author line).

SW Blog Post Hero

Module Documentation: Download Here — Download SW Blog Post Hero — AI Agent Reference (Text)

Module path: smithworks-2025/sw-modules/SW Blog Post Hero.module
Use this document when: The user asks about the SW Blog Post Hero HubSpot module—what it does, featured image requirements and size, per-post vs default settings, how to configure banner image, title, post meta, or banner height/spacing. Max width: Hardcoded 1800px (not user-editable).

In this section: Default state· Overview· Featured Image and Size· Per-Post vs. Default Settings· Configuration Reference· Common Tasks· When to Use Custom CSS· Appendix· Document Version

Overview

SW Blog Post Hero is the hero/banner section on blog post pages. It shows the post’s featured image (or an override image), title, and optional post meta (tags, author line with date/time). It replaces the standard HubSpot Header Image and Page Title on the blog single post template. Post meta (title, tags, author) renders above the banner image with correct z-index. Used only on blog post templates (e.g. SW Blog Single Post), not on blog listing or website pages.

Featured Image and Size

• Featured image is required for blog posts in HubSpot when using this module with the post’s image (i.e. when “Override banner image” is off). The module uses the blog post’s Featured image from the post settings. If the post has no featured image, the banner area may be empty or fall back to theme behavior.
• Ideal image size for optimized display: 1280px × 640px. This aspect ratio (2:1) gives the most consistent results for this module (blog post hero), blog listing pages (e.g. SW Blog Cards), and shared posts on social media (Open Graph / Twitter cards). Recommend that users set the blog post’s Featured image to 1280×640 for best appearance.

Per-Post vs. Default Settings

• When settings are changed on a specific blog post, only that post is affected. Editing the SW Blog Post Hero on one post does not change any other post.
• To change the default settings that apply to all blog posts (or to posts that have not had their hero edited), edit the blog post template, not individual posts: In Design Manager (Main menu → Content → Design Manager), open the blog post template (e.g. SW Blog Single Post), click the SW Blog Post Hero module in the template preview, set the desired values in the module panel, and Save the template. Those values are the template default and apply to every blog post that does not have its own override. Changing the module’s default field values in code (e.g. fields.json) only affects new instances; for blog posts, the template default is what determines the default for all posts.

Configuration Reference

Content tab: Custom ID, Custom Classes; Title (Override title, Heading, Size, Display Size, Align, Color, Text wrap); Post meta (Show tags, Link tags, Show author line, Show author date, Show author time); Banner image (Override banner image, XL and optional Desktop/Tablet/Mobile images).

Style tab: Module Settings (Spacing, module height, vertical alignment; max width hardcoded 1800px, not user-editable); Module Background Settings (Theme Color, Custom Color, Gradient only; default Custom Color; use to set background color for banner/title block); Banner spacing (spacing CSS, Override border radius, Border radius (px), Banner height XL and optional Desktop/Tablet/Mobile min/max); Content Colors (Text Color, Link Colors for title block when Show post meta on—dropdown Theme Defaults (auto), On Dark Background, On Light Background); Post Meta (Title Block) (Spacing, Background Color, Override Border Radius, Border Color, Border Width when Show post meta on).

Common Tasks (“How Do I…”)

• Use the post’s featured image → Override banner image = OFF; set the post’s Featured image (1280×640 recommended).
• Use a different image for one post → Edit that post → Override banner image = ON → set XL Banner Image (and optional breakpoint overrides).
• Show or hide tags/author line → Content → Post meta toggles.
• Change the title for one post → Content → Title → Override title = ON, then set Heading and/or Size, Display Size, Align, Color.
• Change default settings for all posts → Design Manager → open SW Blog Single Post template → click SW Blog Post Hero → set values → Save template.
• Change banner height or border radius → Style → Banner spacing.
• Change module spacing → Style → Module Settings → Spacing.
• Change title block background or border → Style → Post Meta (Title Block) (when Show post meta on): Background Color, Override Border Radius, Border Color, Border Width.
• Change title block text/link colors → Style → Content Colors (when Show post meta on): Text Color, Link Colors.

When to Use Custom CSS

Use custom CSS when the change cannot be done via Content or Style fields. Add overrides in the theme’s custom CSS (e.g. custom-styles.css). Use the CSS classes in the Appendix below.

Appendix: CSS Classes and Selectors

Element	Class(es)	Notes
Module wrapper	.sw-blog-post-hero	Plus custom_classes if set; id = Custom ID if set.
Inner container	.sw-blog-post-hero__inner	Position relative, z-index 1.
Banner (image container)	.sw-blog-post-hero__banner	Border radius from theme or Override border radius.
Banner image	.sw-blog-post-hero__banner-img (or picture)	Min/max height from Banner spacing.

Breakpoints: Desktop ≥992px; Tablet 768–991px; Mobile ≤767px.

Document Version

Module: SW Blog Post Hero (smithworks-2025). Doc last updated: 2026-02-18. 2026-02-18: Content Colors; Post Meta (Title Block) styling; meta overlay z-index; Module Background Settings default. 2026-02-12: Max width hardcoded 1800px (not user-editable). 2026-02-10: Initial AI documentation. Featured image required and 1280×640 recommendation; per-post vs template default settings; configuration reference; common tasks; CSS appendix.

SW Blog Post Body

Module Documentation: Download Here — Download SW Blog Post Body — AI Agent Reference (Text)

Module path: smithworks-2025/sw-modules/SW Blog Post Body.module
Use this document when: The user asks about the SW Blog Post Body HubSpot module—what it does, how to configure post body wrapper, post meta, author bio, or content styling. Max width: Hardcoded 1400px (not user-editable).

In this section: Default state· Overview· Configuration Reference· Common Tasks· Document Version

Overview

SW Blog Post Body wraps the blog post body content on blog post pages. It displays the post’s main content (content.post_body), optional post meta (title, tags, author line), and optional author bio. Used only on blog post templates (e.g. SW Blog Single Post).

Max width: Fixed at 1400px. Not user-editable. To change, custom CSS or module code edits are required.

Configuration Reference

Content tab: Custom ID, Custom Classes; Show post meta (title, tags, author line); Show title (when post meta on); Title (Override title, Heading, Size, Display Size, Align, Color); Post meta styling; Show author bio (author name, image, bio text).

Style tab: Module Settings (Spacing, module height; max width hardcoded 1400px, not user-editable); Module Background Settings; Content colors; Post meta styling (when show_post_meta on); Author bio styling (when show_author_bio on).

Common Tasks (“How Do I…”)

• Show or hide post meta → Content → Show post meta.
• Show or hide title → Content → Show title (when Show post meta is on).
• Override title for one post → Content → Title → Override title = ON.
• Show author bio → Content → Show author bio = ON.
• Change default settings for all posts → Edit the blog post template → click SW Blog Post Body → set values → Save.
• Change module spacing → Style → Module Settings → Spacing.

Document Version

Module: SW Blog Post Body (smithworks-2025). Doc last updated: 2026-02-12. 2026-02-12: Initial AI documentation. Max width hardcoded 1400px (not user-editable).

SW Blog Related Posts

Module Documentation: Download Here — Download SW Blog Related Posts — AI Agent Reference (Text)

Module path: smithworks-2025/sw-modules/SW Blog Related Posts.module
Use this document when: The user asks about showing related posts on blog post pages, “You might also like” sections, or the SW Blog Related Posts module.

In this section: Default state· Overview· Related Modules· Configuration Reference· Common Tasks· Document Version

Overview

SW Blog Related Posts displays related blog posts on blog post pages. It shows posts that share tags with the current post (excluding the current post). Use it for “Related Posts” or “You might also like” sections. Use this module on blog post templates; for blog listing and website pages, use SW Blog Cards instead.

When Use as related posts is ON (default): Tag Filter blank = automatic related posts by first tag; Tag Filter set = filter by that tag. Supports grid, slider, and infinite scroll (On scroll or Load more button).

Related Modules

Module	Relationship
SW Blog Cards	For blog listing pages and website pages. SW Blog Related Posts is for single post pages only.
SW Cards	Generic card repeater for non-blog content. SW Blog Related Posts is for blog posts only.
SW Cards Products	Manual cards with bullets/pricing. SW Blog Related Posts is for blog posts only.

Configuration Reference

Content tab: Headings (repeater); Content area (rich text); CTA buttons; Blog (when not related); Use as related posts; Tag Filter; Post Display Settings (Posts to show, Post start, Use infinite scroll, Max posts, Load trigger, Load more button); Post Card settings.

Style tab: Module Settings (spacing, max width, heights); Module Background Settings; Content Area Settings; Content Colors (including Link Colors: Theme Defaults (auto), On Dark Background, On Light Background for card vs. content area, same pattern as SW Blog Cards); Cards Layout; Slider Settings (when infinite scroll OFF).

Common Tasks (“How Do I…”)

• Show related posts on a blog post → Add SW Blog Related Posts to blog post template (e.g. After Post drop zone). Use as related posts = ON. Leave Tag Filter blank for automatic related posts by tag.
• Filter related posts by a specific tag → Content → Tag Filter → Select tag.
• Use slider → Use infinite scroll = OFF; Style → Slider settings → Use as slider = ON.
• Use infinite scroll → Content → Post Display Settings → Use infinite scroll = ON.

Document Version

Module: SW Blog Related Posts (smithworks-2025). Doc last updated: 2026-02-12. 2026-02-12: Initial AI documentation.

SW CTA Popup

Module Documentation: Download Here — Download SW CTA Popup — AI Agent Reference (Text)

Module name: SW CTA Popup
Use this document when: The user asks about the SW CTA Popup HubSpot module—what it does, how to configure it, or when to choose it over SW Popup Panel.

In this section: Purpose and When to Use· Site-wide: global footer· Choosing vs SW Popup Panel· Configuration Reference· Common Tasks· Document Version

Purpose and When to Use

SW CTA Popup is a simple, quick-setup popup for one-off CTAs. Use it when:

• You need a single popup on one page or across all pages (via global footer)
• You want fast setup with minimal configuration
• One headline, body text, optional thumbnail, and optional button is enough
• You do not need multiple variants, page-specific popups, announcement banners, or advanced triggers

Placement options: Add to a single page for a page-specific popup. For all pages, use the global footer content editor (same UI steps as SW Popup Panel)—see Site-wide: global footer (content editor) under SW Popup Panel. Add SW CTA Popup in the footer drag-and-drop area next to SW Simple Footer; Publish global content.

Choosing vs SW Popup Panel

When to choose SW Popup Panel instead: When you need multiple popup variants, page-specific content (body class matching), announcement banners, more positioning options (top, left, right, modal), per-variant triggers, or greater extensibility. SW Popup Panel requires more setup but offers maximum flexibility.

SW CTA Popup is not deprecated. It serves quick, simple popups. SW Popup Panel serves advanced use cases.

Configuration Reference

Content tab: Enabled (toggle). CTA Variants (repeater)—first item displays; each variant has Variant Label, Headline, Body Text, Content Alignment, Button Visibility, Thumbnail Image, Button Text, Button URL. Positioning (group)—Position (Bottom Right or Bottom Left), Bottom Offset (px), Panel Width (px). Timing & Triggers—Time Delay, Scroll %, Exit Intent.

Common Tasks

• Add popup to one page: Add SW CTA Popup module to the page. Configure CTA Variants (first item shows).
• Add popup to all pages: Follow Site-wide: global footer (content editor) (SW Popup Panel section). In the global footer DnD area, add SW CTA Popup alongside SW Simple Footer, then Publish global content.
• Change which variant shows: Content tab → CTA Variants. Reorder items; the first displays.
• Change position: Content tab → Positioning → Position, Bottom Offset, Panel Width.

Document Version

Module: SW CTA Popup. Doc last updated: 2026-03-26. 2026-03-26: Site-wide placement: global content editor and footer DnD (cross-link to SW Popup Panel); removed “global footer partial” as the primary marketer path. 2026-03-18: Initial documentation. Clarified purpose: simple, quick-setup popup. When to choose SW Popup Panel instead. SW CTA Popup is not deprecated.

SW Form

Module Documentation: Download Here — Download SW Form — AI Agent Reference (Text)

Module path: smithworks-2025/sw-modules/SW Form.module
Use this document when: The user asks about the SW Form HubSpot module—what it does, when to use it vs SW Pillar Section (Form column), or how to configure it.

In this section: Default state· Purpose and When to Use· SW Form vs SW Pillar Section· Related Modules· Configuration Reference· Common Tasks· Document Version

Purpose and When to Use

SW Form is a standalone form module. Use it when you need only a form (with optional headings above). If the form needs to sit beside an image, video, or content block (two-column layout), use SW Pillar Section with Secondary Column = Form instead.

SW Form vs SW Pillar Section (Form column)

Scenario	Use This Module	Why
Form only; no image or content beside it	SW Form	Standalone form. Headings above form; full form styling (Form Box Settings).
Form beside image, video, or content (two columns)	SW Pillar Section	Set Secondary Column = Form. Form sits in one column; image/video/content in the other.
Form with more design elements (bullets, rich text, CTAs beside it)	SW Pillar Section	Pillar Section supports headings, bullets, Content Area, CTAs in the primary column with Form in the secondary column.

Rule of thumb: SW Form = Form is the main focus; nothing beside it. SW Pillar Section (Form column) = Form needs to share the layout with image, video, or content (side-by-side).

Related Modules

Module	Relationship
SW Pillar Section	Use when form needs to sit beside image, video, or content (two-column layout). Set Secondary Column = Form.
SW Button	CTA buttons; different purpose.

Configuration Reference

Content tab: Custom ID, Custom Classes; Headings (above form) (repeater: Heading, Size, Display Size, Color, Align; Override Text Alignment/Display Size for Tablet/Mobile); Form (HubSpot form picker); Module Background Video (when Style → Background Option = Video).

Style tab: Module Settings (Spacing, Max Module Width, XL/LG/MD/SM Module Height cascade); Module Background Settings (Background Option: Theme Color, Custom Color, Gradient, Image, Video); Form Box Settings (Background Color, Override Border Radius, Border, Override Shadow, Hide Field Labels, Field Styling, Button Styling, Form Box Padding).

Common Tasks (“How Do I…”)

• Change headings above form → Content → Headings (above form).
• Change form → Content → Form (HubSpot form picker).
• Change form box background → Style → Form Box Settings → Form Box Background Color.
• Change form field/button styling → Style → Form Box Settings → Field Styling, Button Styling.
• Change module background → Style → Module Background Settings → Background Option.
• Change spacing → Style → Module Settings → Spacing.

Document Version

Module: SW Form (smithworks-2025). Doc last updated: 2026-02-18. 2026-02-18: Initial AI documentation. SW Form Section deprecated; migrate to SW Form (standalone) or SW Pillar Section (Form column).

SW Cards

Module Documentation: Download Here — Download SW Cards — AI Agent Reference (Text)

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.

In this section: Default state· Purpose and When to Use· Use Cases· Related Modules· Common Tasks· Slider Clipping· Document Version

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. Use for feature cards, service cards, team cards, product cards, any non-blog card layout. Per card, you can optionally override background and rich-text color (and link treatment) via Override card background and rich text in the card repeater; otherwise defaults come from Style → Cards Layout (card background) and Content Colors (text/link). For structured bullet lists per card and optional dual pricing (with or without the visitor Price Field Toggle), use SW Cards Products instead.

Use Cases

Feature overview (icon + heading + description + CTA per card); service offerings; team members; product highlights with rich text bodies; section-level CTA row below all cards. When to choose another: Blog listing or related posts → SW Blog Cards or SW Blog Related Posts. Plan/feature bullets + optional Price 1/2 per card → SW Cards Products. Image beside content with headings/bullets/CTAs, alternating → SW Pillar Section. Accordion with image per panel → SW Pillar Accordion.

Related Modules

Module	Relationship
SW Cards Products	Same card-grid idea; bullet repeater + optional pricing per card; no module-level description or section CTA strip. See SW Cards vs SW Cards Products.
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.

Common Tasks

• Add or edit a card → Content → Cards → Add item or edit existing.
• Change card icon/image/video → Content → Cards → open item → Icon type, then configure Icon, Image, SVG, or Video fields.
• Change icon or SVG size (per card) → Content → Cards → open item → Icon width, Icon height (visible when Icon type = Icon or SVG). Default 75px; set exact pixels for precise control.
• Use slider → Style → Cards Layout → Use slider when overflow = ON. Ensure cards exceed Cards per row (XL).
• Change cards per row → Style → Cards Layout → Cards per row (XL, Tablet, Mobile).
• Change module background → Style → Module Settings → Module background.
• Change module wrapper padding / margin → Style → Module Settings → Spacing. (New module instances default to 50px top / 40px bottom padding.)
• Default text and link colors for all cards → Style → Content Colors → Text Color, Link Colors (Card content)—Theme Defaults (auto), On Dark Background, On Light Background; separate Link Colors for Content Area below the row.
• Default card background for all cards → Style → Cards Layout → Card colors.
• Override one card’s background or rich-text color → Content → Cards → open card → Override card background and rich text ON → Card background, Card text (rich text), Link Colors as needed. Card headings still use their repeater color fields.

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: Style → Cards Layout → Cards Settings. Reduce Cards per row (Tablet) and/or Cards per row (Mobile) for the affected breakpoints. For phones, set Mobile to 1 (one card per row). Breakpoints: XL (1200px+), Desktop (992px–1199px), Tablet (768px–991px), Mobile (≤767px).

Document Version

Module: SW Cards (smithworks-2025). Doc last updated: 2026-03-24. 2026-03-24 (latest): Link Colors label set (Theme Defaults (auto), On Dark Background, On Light Background) for Style Content Colors and per-card override. 2026-03-24 (later): Per-card Override card background and rich text; module Spacing default for new instances (50px top / 40px bottom); Content Colors vs per-card override in Purpose and Common Tasks. 2026-03-24: Cross-link to SW Cards Products (bullets + optional pricing vs richtext + section CTAs). 2026-02-19: Slider clipping troubleshooting. 2026-02-14: icon_width, icon_height per card. 2026-02-13: Initial AI documentation.

SW Cards Products

Module Documentation: Download Here — Download SW Cards Products — AI Agent Reference (Text)

Module name: SW Cards Products
Use this document when: The user asks about the SW Cards Products module—bullets per card, pricing, Price Field Toggle, media per card, layout, slider, or how it differs from SW Cards.

In this section: Default state· Purpose and When to Use· SW Cards vs SW Cards Products· Use Cases· Related Modules· Common Tasks· Slider Clipping· Document Version

Purpose and When to Use

SW Cards Products is a non-blog card grid or slider. Each card can include optional media (icon, image, SVG, or video via Show card media), a headings repeater, a bullet / feature list repeater, optional Price 1 and Price 2, and card-level CTAs. Module-level Price Field Toggle adds a visitor pill to switch between Price 1 and Price 2 on cards that have Show Price on. You do not need Price Field Toggle for simple layouts: leave it off and use bullets only (or pricing without the pill)—good for straightforward bulleted-list cards.

SW Cards vs SW Cards Products

Topic	SW Cards	SW Cards Products
Main body content	Rich text per card	Bullet repeater per card (structured feature lines)
Pricing	No built-in price fields	Optional Show Price, Price 1 / Price 2, optional Price Field Toggle
Below the card row	Optional module Description and CTA Buttons	No section-level CTA strip—CTAs are on each card
Per-card background / body text	Optional Override card background and rich text (rich text + links; headings keep their own colors)	Optional Override card background and feature list text (feature list body; headings keep their own colors)
Choose this module when	Team/services copy in paragraphs, varied richtext, or you need a single CTA row under all cards	Plan or product bullet lists, optional dual price (with or without the pill toggle), or bullet-only cards

Use Cases

Pricing tiers; product packages with checkmark-style bullets; feature matrices. Simple bullet cards: leave Show Price off and Price Field Toggle off. When to choose another: Blog-driven cards → SW Blog Cards or SW Blog Related Posts. Single side-by-side section → SW Pillar Section. Rich text–heavy cards + section CTAs → SW Cards.

Related Modules

Module	Relationship
SW Cards	Richtext per card; section-level description and CTAs. See comparison above.
SW Blog Cards	Blog posts only.
SW Blog Related Posts	Related posts on post pages only.
SW Pillar Section	One side-by-side section, not a multi-card grid.

Common Tasks

• Edit bullets on a card → Content → Cards → open card → bullet items repeater.
• Bullet-only cards (no pricing) → Leave Show Price off; leave Price Field Toggle off.
• Monthly / yearly style switch → Content → Price Field Toggle on; set Price 1 Label / Price 2 Label; per card Show Price on and amounts filled.
• List bullet style (all cards) → Style → Feature list (bullets).
• Slider / cards per row → Style → Cards Settings and Slider settings (when cards exceed cards per row).
• Link contrast (bullets, module wrapper, per-card override) → Style → Content Colors (Link Colors for card body + module wrapper); Content → card → override group for per-card Link Colors on feature-list links. Options: Theme Defaults (auto), On Dark Background, On Light Background.

Slider Clipping (Troubleshooting)

Same pattern as SW Cards: too many cards per row on a small viewport can clip content. Reduce Cards per row under Style → Cards Settings for Tablet and/or Mobile.

Document Version

Module: SW Cards Products (smithworks-2025). Doc last updated: 2026-03-24. 2026-03-24 (later): Link Colors dropdown labels (Theme Defaults (auto), On Dark Background, On Light Background) in Common Tasks. 2026-03-24: Initial AI documentation section; downloadable SW-Cards-Products.txt; vs SW Cards; optional Price Field Toggle; bullet-only use case.

SW Button

Module Documentation: Download Here — Download SW Button — AI Agent Reference (Text)

Module name: SW Button
Use this document when: The user asks about the SW Button HubSpot module—what it does, how to configure it, or how to change buttons, alignment, icons, background, or spacing.

In this section: Default state· Purpose and When to Use· Module Structure· Configuration Reference· Common Tasks· When to Use Custom CSS· Appendix· Document Version

Purpose and When to Use

The SW Button module provides:

• One or more CTA buttons in a repeater. Each button has text, link, style (Primary, Secondary, Tertiary, White, Black, Dark, Light, Gradient One, Gradient Two, Simple Link), and optional icon (Font Awesome) with position (left/right) and purpose (decorative/semantic).
• Button alignment: Desktop alignment (left, center, right) plus optional Override Tablet Alignment and Override Mobile Alignment for breakpoint-specific alignment.
• Module styling: Module Settings (spacing, max width, height, vertical alignment), Module Background Settings (Theme Color, Custom Color, Gradient, Image, or Video), and Module Background Video (Content tab, when Background Option = Video). Per Module Settings and Background Standards below.

Use it for standalone CTA sections, button groups, or call-to-action blocks that need flexible button count and styling.

Module Structure (What You See on the Page)

1. Module wrapper — A block with optional background (image, color, custom, or gradient) and spacing.
2. Button area — One or more buttons in a row, aligned left, center, or right. Buttons wrap on smaller screens. Alignment can differ on tablet (768–991px) and mobile (≤767px) when overrides are enabled.

Breakpoints: Desktop ≥992px; Tablet 768–991px; Mobile ≤767px.

Configuration Reference

The module has Content and Style tabs. Group and field names match the HubSpot editor.

Content Tab

• Custom ID / Custom Classes — Optional.
• Buttons (repeater) — Add one or more buttons. Per button: Button Text, Button Link, Button Style, Button Size (Small/Default/Large) — hidden when Button Style = Simple Link, Add Icon, Icon (Icon picker, Position, Purpose).
• Button Alignment — Left, Center, or Right. Default: Center.
• Override Tablet Alignment / Tablet Button Alignment — Breakpoint 768–991px (MD).
• Override Mobile Alignment / Mobile Button Alignment — Breakpoint ≤767px (SM).
• Module Background Video — Always last. Visible when Style → Module Background Settings → Background Option = Video. Video Type (HubSpot Video, file, embed), HubSpot Video, Video File, External Embed, Poster image. Overlay, base color, and playback toggles (Autoplay, Loop, Muted, Plays Inline) are in Style tab when Video. See Module Settings and Background Standards below.

Style Tab

• Module Settings (first) — Spacing, Max Module Width, module height groups (XL + Desktop/Tablet/Mobile overrides), vertical alignment. Minimum Height choices: Default (content height), Custom Height, Full Screen.
• Module Background Settings (second) — Background Option (Theme Color, Custom Color, Gradient, Image, Video). When Image: responsive image groups. When Color/Custom/Gradient: color fields. When Video: overlay, base color, and playback toggles (Autoplay, Loop, Muted, Plays Inline) here; source and poster in Content tab.
• Content Colors — Link Colors for Simple Link buttons only (Theme Defaults (auto), On Dark Background, On Light Background). Does not change Primary/Secondary/etc. button styles.

Common Tasks (“How Do I…”)

• Add or edit buttons → Content → Buttons (repeater). Set Button Text, Button Link, Button Style, Button Size (Small/Default/Large). Use Add Icon and Icon for an icon per button.
• Change button alignment (desktop) → Content → Button Alignment.
• Change button alignment on tablet/mobile → Content → Override Tablet/Mobile Alignment (ON) → Tablet/Mobile Button Alignment.
• Add an icon to a button → Content → Buttons → Add Icon (ON) → Icon group.
• Change button style → Content → Buttons → Button Style per item.
• Change module background → Style → Module Background Settings → Background Option.
• Change spacing → Style → Module Settings → Spacing.
• Set module to content height → Style → Module Settings → Minimum Height = Default.
• Add video background → Style → Module Background Settings → Background Option = Video (overlay, base, playback toggles here), then Content → Module Background Video (source, poster).
• Custom ID or CSS class → Content → Custom ID, Custom Classes.

When to Use Custom CSS

Use custom CSS when the change cannot be done via Content or Style fields (e.g. button font size, gap between buttons, hover effects). Add overrides in your theme’s custom CSS file—for Sprocket Rocket themes, usually custom-styles.css. Use the CSS classes in the Appendix below.

Appendix: CSS Classes and Selectors

Element	Class(es)	Notes
Module wrapper	.sw-button	Plus custom_classes if set; id = Custom ID if set. Modifiers: .sw-button--has-bg-image, .sw-button--has-bg-video.
Button container	.sw-button__cta	Flex container. Uses --left, --center, --right for alignment.
Button wrapper	.btn-wrapper, .btn-{style}-wrapper	Wraps each standard button.
Simple link wrapper	.simple-link-wrapper	When Button Style = Simple Link.
Button link	.btn, .cta-button, .simple-link

Data attributes: data-md-align, data-sm-align (tablet/mobile alignment when overrides ON). Breakpoints: Desktop ≥992px; Tablet 768–991px; Mobile ≤767px.

Document Version

Module: SW Button (smithworks-2025, sw-theme-elements). Doc last updated: 2026-02-12. 2026-02-12: Button Size (Small/Default/Large) in button repeater; padding/margin fix (null sanitization); spacing from Module Settings applies as inline styles on wrapper and inner. 2026-02-04: Video overlay, base color, playback toggles in Style tab. See Module Settings and Background Standards below.

SW Image & Text

Don’t use SW Image & Text when: The request includes “image on the left/right,” “two columns,” “side-by-side,” or alternating image alignment per section—use SW Pillar Section instead.

Module Documentation: Download Here — Download SW Image & Text — AI Agent Reference (Text)

Module name: SW Image & Text
Use this document when: The user asks about the SW Image & Text HubSpot module—what it does, how to configure it, or how to change the image, Content Area text, alignment, background, or spacing.

In this section: Default state· Purpose and When to Use· Use Cases· Related Modules· Module Structure· Configuration Reference· Common Tasks· When to Use Custom CSS· Appendix· Document Version

Purpose and When to Use

Intent: The SW Image & Text module is a simple image and/or text module aligned with the Sprocket Rocket Theme. It is intentionally minimal—no heading repeaters, no button repeaters, no card or list repeaters. Its purpose is to give users an image and/or rich-text block that matches the theme’s styling and behavior instead of using generic HubSpot image or rich-text elements. Conceptually it is similar to SW Button: a theme-aligned replacement for a core HubSpot element, not a full section builder.

The module provides:

• 4-tier responsive image — XL Image (1200px+), with optional Override Desktop/Desktop Image (992–1199px), Override Tablet/Tablet Image (768–991px), Override Mobile/Mobile Image (≤767px). Placeholder in editor via XL default; use Remove on the image to show no image.
• Image alignment per breakpoint — Inherit, Left, Center, or Right for each level. Default: Center.
• Content Area — Single rich-text field. Leave blank to hide the text block.
• Content style — Typography: Default, Large (text balanced), Large (text full-width), Small, Blockquote. Below Content Area.
• Module Settings and Module Background Settings — Spacing, max width, module height (Default/Custom/Full Screen), vertical alignment; background (Theme Color, Custom Color, Gradient, Image, or Video). When Video: overlay, base color, and playback toggles in Style; source and poster in Content → Module Background Video. See Module Settings and Background Standards.

Use it for simple image blocks, image + caption, standalone text blocks (image removed), or theme-aligned image/rich-text where you do not need headings, buttons, or repeaters.

Use Cases

Capabilities: Simple image + rich text; responsive image; alignment per breakpoint. No headings, bullets, or CTAs.

Use for: Simple image+caption; image+text block; standalone text (image removed); theme-aligned image/rich-text where you don’t need headings, bullets, or CTAs.

When to choose SW Pillar Section instead: When you need headings, bullets, CTAs, or alternating image left/right across multiple sections. SW Pillar Section has those; SW Image & Text does not. Choose by capabilities needed, not page length.

Related Modules

Module	Relationship
SW Pillar Section	Image/video beside content with headings, bullets, CTAs. Add multiple instances for alternating layout.
SW Pillar Accordion	Accordion with image per panel. Different layout.

Module Structure (What You See on the Page)

1. Background (optional) — Image, color, gradient, or video from Module Background Settings.
2. Inner container — Constrained by Max Module Width. Contains:
3. Image (optional) — Responsive picture with one image per breakpoint (or none if user clicked Remove on XL Image). Alignment can vary by breakpoint.
4. Content Area (optional) — Rich text below the image. If empty, the text block does not render.

Breakpoints: XL 1200px+; Desktop (LG) 992–1199px; Tablet (MD) 768–991px; Mobile (SM) ≤767px.

Configuration Reference

The module has Content and Style tabs. Group and field names match the HubSpot editor.

Content Tab

• Custom ID / Custom Classes — Optional.
• Image (group, collapsed by default) — 4-tier responsive images and alignment. Expand to access XL Image and per-breakpoint overrides.
• XL Image — Content → Image (group) → XL Image. Primary image for 1200px+ (XL). Default placeholder in editor. To show no image: click Remove.
• Image alignment (XL) — Inherit, Left, Center, Right. Default: Center.
• Override Desktop Image (toggle) — When on: Desktop Image, Image alignment (Desktop). Same pattern for Override Tablet Image / Tablet Image / Image alignment (Tablet) and Override Mobile Image / Mobile Image / Image alignment (Mobile).
• Content Area — Rich text. Leave blank to hide the text block. Default: Large (text balanced). Text alignment per breakpoint in Style → Content Area Settings.
• Content style — Typography: Default, Large (text balanced), Large (text full-width), Small, Blockquote. Default: Large (text balanced). Below Content Area.
• Module Background Video — Visible when Style → Module Background Settings → Background Option = Video. Video Type (HubSpot Video, file, embed), poster. Overlay, base color, and playback toggles (Autoplay, Loop, Muted, Plays Inline) are in Style tab when Video. See Module Settings and Background Standards.

Style Tab

• Module Settings (first) — Spacing, Max Module Width, XL Module Height (Minimum Height: Default, Custom Height, Full Screen) with Override Desktop/Tablet/Mobile Height and Vertical Alignment per breakpoint. When no padding is set, no default 25px.
• Module Background Settings (second) — Background Option (Theme Color, Custom Color, Gradient, Image, Video). When Image: responsive image groups. When Video: overlay, base color, playback toggles (Autoplay, Loop, Muted, Plays Inline) here; source and poster in Content tab.
• Content Colors (third) — Text Color and Link Colors for Content Area. Link Colors: Theme Defaults (auto), On Dark Background, On Light Background. Defaults: Theme defaults. Use when background is Custom Color or theme cascade does not apply.
• Content Area Settings (fourth) — Text Alignment (Desktop) Left/Center/Right; Override Text Alignment (Tablet/Mobile) for per-breakpoint alignment. Overrides inline text-align in rich text.

Common Tasks (“How Do I…”)

• Change or replace the main image → Content → Image (group) → XL Image. Use Replace or Remove. Turn on Override Desktop/Tablet/Mobile Image to set different images per breakpoint.
• Show no image (text only) → Content → Image (group) → XL Image → click Remove.
• Use a different image on mobile/tablet/desktop → Content → Image (group) → turn on Override Mobile/Tablet/Desktop Image → set Mobile/Tablet/Desktop Image.
• Change image alignment → Content → Image (group) → Image alignment (XL) and, if overrides on, Image alignment (Desktop/Tablet/Mobile). Inherit, Left, Center, Right.
• Change the text below the image → Content → Content Area. Leave blank to hide.
• Change content typography (lead, small, blockquote) → Content → Content style. Default, Large (text balanced), Large (text full-width), Small, Blockquote.
• Change text alignment (left/center/right) → Style → Content Area Settings → Text Alignment (Desktop). Use Override Text Alignment (Tablet/Mobile) for per-breakpoint alignment.
• Change module background → Style → Module Background Settings → Background Option. For Video: set Option = Video, then Style → overlay, base, playback toggles; Content → Module Background Video for source and poster.
• Change spacing or max width → Style → Module Settings → Spacing; Max Module Width. When no padding set, no default 25px.
• Set module height → Style → Module Settings → XL Module Height → Minimum Height (Default, Custom Height, Full Screen). Use overrides for per-breakpoint height.
• Custom ID or CSS class → Content → Custom ID, Custom Classes.

When to Use Custom CSS

Use custom CSS when the change cannot be done via Content or Style fields (e.g. image border radius, typography for Content Area, spacing between image and text). Add overrides in your theme’s custom-styles.css (Sprocket Rocket themes). Use the CSS classes in the Appendix below; use Custom ID or Custom Classes for instance-specific overrides.

Appendix: CSS Classes and Selectors

Element	Class(es)	Notes
Module wrapper	.sw-image-text	Plus custom_classes if set; id = Custom ID if set. Modifiers: .sw-image-text--has-bg-image, .sw-image-text--has-bg-video.
Inner (max-width)	.sw-image-text__inner	Constrained by Max Module Width.
Container	.sw-image-text__container	Flex column; image then text.
Image wrapper	.sw-image-text__image	Wraps picture; text-align controls alignment per breakpoint.
Picture / img	.sw-image-text__picture, .sw-image-text__img
Text block	.sw-image-text__text	Content Area rich text.
Video wrapper / embed	.sw-image-text__video-wrap, .sw-image-text__video-file, .sw-image-text__embed	Background video when Option = Video.

Document Version

Module: SW Image & Text (smithworks-2025). Doc last updated: 2026-02-18. 2026-02-18: Image group (collapsed); Content Area Settings (text alignment per breakpoint); Content Colors; content style default Large (text balanced). 2026-02-16: Content style option. 2026-02-04: Video overlay, base color, and playback toggles moved to Style tab. Module Background Video (Content) now only: Video Type, source, poster. Spacing: no default 25px when not set. When the module changes materially, this page is updated; use this URL to always have the latest version.

SW Popup Panel

Module Documentation: Download Here — Download SW Popup Panel — AI Agent Reference (Text)

Module name: SW Popup Panel
Use this document when: The user asks about the SW Popup Panel HubSpot module—what it does, how to configure it, or when to choose it over SW CTA Popup.

In this section: Purpose and When to Use· Site-wide: global footer (content editor)· Page Body Class· Blog posts and tag-* body classes· Choosing vs SW CTA Popup· Configuration Reference· Common Tasks· Document Version

Purpose and When to Use

SW Popup Panel is a flexible, extensible popup for advanced use cases. Use it when:

• You need multiple popup variants with different content per page (body class matching)
• You want announcement banners (first item shows on all pages)
• You need more positioning options (top, bottom, left, right, corners, modal)
• You want per-variant triggers (time delay, scroll %, exit intent) and session behavior
• You need greater extensibility (thumbnail layout, panel size, padding, style settings per variant)

Placement: For site-wide display, add the module in the global footer content editor (see Site-wide: global footer (content editor) below). For per-page variants, use Label & Body Class on each content item and add the same sanitized token to the page’s Body Class field in the editor: Page contents → Hidden modules → Body Class (unless the class already comes from the blog template — see Blog posts and tag-* body classes). Do not direct users to Settings → Advanced for Body Class on Smithworks themes.

Site-wide: global footer (content editor)

Standard Smithworks themes use a global footer that includes a drag-and-drop area (label is usually SW Footer Modules – Add footer modules here) with SW Simple Footer already placed. Add SW Popup Panel or SW CTA Popup as another module in that same area—not by editing only SW Simple Footer’s fields.

1. Open any live page that uses the Smithworks theme.
2. Click the footer in the preview.
3. Choose Edit global content or Open in global content editor (wording depends on HubSpot).
4. In the left sidebar, open SW Global Site Footer. If you do not see it, check Hidden modules (see First-Time Setup → Troubleshooting (UI-Only)).
5. In the footer layout, find the region that contains SW Simple Footer. Use Add / Add row (or HubSpot’s equivalent) to insert a module and choose SW Popup Panel (or SW CTA Popup).
6. Configure the module, then Publish global content.

Notes for AI: If the user only sees SW Simple Footer fields and no way to add a module, they may be focused on the module instance instead of the parent footer layout or SW Global Site Footer. Do not lead with Design Manager or sw-site_footer.html for typical Smithworks themes. Developer note (theme authors only): Implemented as sw-partials/sw-site_footer.html with a dnd_area.

Blog posts and tag-* body classes

When SW Blog Single Post is used and the theme adds per-tag classes, each HubSpot blog tag on the post adds a tag-{slug} class on <body> (e.g. tag-strategy, tag-chief-marketing-officer), where {slug} is the topic’s URL slug (lowercase).

Popup Panel setup: In Content → Content Items, set Label & Body Class to that same token (e.g. tag-strategy). The class is already on the blog post — the user does not need to add a duplicate entry in the page Body Class field for that tag.

Multiple tags on one post: The body may have several tag-* classes. Which variant shows is determined by Content Items repeater order: the first enabled item (top to bottom) that matches a class on <body> wins. Put the highest-priority variant first in the repeater when a post could match more than one tag-driven item.

Notes for AI: For tag-driven popups, give exact paths: Content → Content Items → Label & Body Class = tag-{slug}. If the user has multiple tags and the wrong popup appears, explain repeater order (first matching item wins). For non-blog pages, when they must set a body class on the page, use Page contents → Hidden modules → Body Class—not Settings → Advanced.

Choosing vs SW CTA Popup

When to choose SW CTA Popup instead: When you need a simple, one-off popup with quick setup. SW CTA Popup is faster to configure for single-variant popups on one page or site-wide.

SW CTA Popup is not deprecated. Both modules serve different use cases.

Configuration Reference

Content tab: Enabled, First Item Is Announcement, Default Behavior. Content Items (repeater)—each item: Enabled, Label & Body Class, Headline, Body Text, Content Alignment, Thumbnail Position (Top/Left/Right), Thumbnail Width, Layout on Narrow Panel, Thumbnail, Button Visibility, Buttons repeater, Panel Size (Width, Height, Padding), Position (9 options), Animation Speed, Style Settings, Timing & Triggers, Session Behavior.

Common Tasks

• Add popup site-wide (global footer): Follow Site-wide: global footer (content editor) above.
• Show different popup per page: Set Label & Body Class on each Content Item. On each page, open Page contents → Hidden modules → Body Class and enter the same sanitized value (e.g. pricing-page-cta). See Page Body Class field (Smithworks themes).
• Show a popup on blog posts by tag (no extra Body Class): Use tag-{slug} in Label & Body Class to match the blog template. See Blog posts and tag-* body classes.
• Show announcement on all pages: First Item Is Announcement = ON.
• Hide popup on specific pages: Add cta-popup-hide in Page contents → Hidden modules → Body Class (see Page Body Class field).
• Change position: Content Items → expand item → Position (Bottom, Top, Left, Right, corners, Modal).

Document Version

Module: SW Popup Panel. Doc last updated: 2026-03-26. 2026-03-26 (later): Page Body Class: Page contents → Hidden modules → Body Class; explicit instruction not to use Settings → Advanced as default; First-Time Setup h4 #page-body-class-field; module fields.json help text. 2026-03-26: Site-wide placement: global content editor path (footer DnD, SW Global Site Footer). 2026-03-19: Blog posts: tag-{slug} body classes; repeater order when multiple tags. 2026-03-18: Initial documentation.

SW Pillar Accordion

Module Documentation: Download Here — Download SW Pillar Accordion — AI Agent Reference (Text)

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

In this section: Default state· Purpose and When to Use· Use Cases· Related Modules· Module Structure· Configuration Reference· Common Tasks· When to Use Custom CSS· Appendix· Document Version

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 up to two CTA buttons.
• Section-level CTAs: up to two optional buttons below the accordion.
• Styling: module background (color or gradient), configurable bottom divider and left bar colors, image visibility by breakpoint, 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.

Module Structure (What You See on the Page)

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 (active/inactive), a clickable header (Accordion Heading) with border-bottom, and an expandable panel with optional Panel Headings, Panel Content, and up to two CTAs.
   • Right: Image that changes with the active 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 (Add Button 1 / Add Button 2).

Configuration Reference

The module has Content and Style tabs. Group and field names match the HubSpot editor.

Content Tab

• Custom ID / Custom Classes — Optional.
• Headings (repeater) — Content tab → Headings. One or more module-level headings. Per heading: Heading, Size, Display Size, Color, Align, Override Padding, CSS Class, Medium/Small overrides.
• Content Area — Rich text between Headings and accordion.
• Accordion Items (repeater) — Content tab → Accordion Items. Add, remove, reorder. No maximum; recommend no more than 3 for UX. Per item: Accordion Heading, Panel Headings, Panel Content, Panel Image, Add Button 1/2, Button text/link/style, Add Icon, Icon (picker/position/purpose).
• CTA Buttons — Add Button 1/2, Button 1/2 text, link, style, Add Icon, Icon (picker/position/purpose), Button Alignment (desktop), Override Medium/Small Alignment with MD/SM Screen Button Alignment.

Style Tab

• Module Background — Background Option (Color or Gradient). Color: Theme Color or Custom. Gradient: gradient picker.
• Content Colors — Text Color and Link Colors for Content Area and panel content. Link Colors: Theme Defaults (auto), On Dark Background, On Light Background. Use when background is Custom or theme defaults do not apply.
• Image Settings — Disable Image on Tablet and Below (hidden ≤992px), Disable Image on Mobile (hidden ≤767px), Override Image Border Radius, Image Corner Radius.
• Content Settings — Text Alignment for main content (above accordion) with Override Tablet/Mobile.
• Panel Content Settings — Text Alignment for accordion panel content with Override Tablet/Mobile.
• Divider Settings — Show Bottom Divider on Last Item (toggle), Bottom Divider Color (accordion header border-bottom; Custom Bottom Divider if Custom), Active Left Bar Color (expanded items; Custom Active Left Bar Color if Custom), Inactive Left Bar Color (collapsed items; Custom Inactive Left Bar Color if Custom).
• Module Settings — Spacing (padding only; default 50px top, 25px right/bottom/left), Max Module Width, XL Module Height with overrides.

Common Tasks (“How Do I…”)

• Change the main section heading → Content → Headings. Edit Heading, Size, Display Size, Color, Align.
• Change the intro paragraph → Content → Content Area.
• Change accordion tab labels → Content → Accordion Items → Accordion Heading per item.
• Change border color under tabs → Style → Divider Settings → Bottom Divider Color (or Custom Bottom Divider if Custom).
• Show/hide bottom divider on last item → Style → Divider Settings → Show Bottom Divider on Last Item.
• Change module background → Style → Module Background (Color or Gradient).
• Hide right-side image on mobile/tablet → Style → Image Settings. Disable Image on Mobile (≤767px) and/or Disable Image on Tablet and Below (≤992px).
• Hide image only on tablets → Not configurable. Use custom CSS: @media 768–991px targeting .sw-pillar-accordion__image-side.
• Add/edit CTA in a panel → Content → Accordion Items → Add Button 1/2, Button text/link/style. To add an icon: Add Icon, Icon (picker/position/purpose).
• Add/edit section-level CTAs → Content → CTA Buttons. Add Button 1/2, Button text/link/style, Add Icon, Icon. Use Button Alignment for horizontal alignment (with optional Medium/Small screen overrides).
• Change panel image → Content → Accordion Items → Panel Image.
• Change panel heading color → Content → Accordion Items → Panel Headings → Color. Panel body color: Style → Content Colors → Text Color.
• Change content area or panel text/link colors → Style → Content Colors → Text Color, Link Colors.
• Change text alignment (main content or panel) → Style → Content Settings (main) or Panel Content Settings (panel) → Text Alignment, Override Tablet/Mobile.
• Change vertical bar color (active/inactive) → Style → Divider Settings → Active Left Bar Color (expanded items) and/or Inactive Left Bar Color (collapsed items). Use theme colors or Custom with color picker. Defaults: Active = Secondary, Inactive = Tertiary.
• Change accordion tab text color/font → Not configurable. Use custom CSS: .sw-pillar-accordion__header or .sw-pillar-accordion__header h3.
• Add padding around module → Style → Module Settings → Spacing (padding only; default 50px top, 25px right/bottom/left).
• Custom ID or CSS class → Content → Custom ID, Custom Classes.
• How many accordion items? → No maximum; recommend ≤3.
• Reorder accordion items → Content → Accordion Items, drag-and-drop. First item is open by default (not configurable).

When to Use Custom CSS

Use custom CSS when the change cannot be done via Content or Style fields (e.g. header font/color, specific spacing or layout tweaks). Add overrides in your theme’s custom CSS file—for Sprocket Rocket themes, usually custom-styles.css. Use the CSS classes in the Appendix below.

Appendix: CSS Classes and Selectors

Element	Class(es)	Notes
Module wrapper	.sw-pillar-accordion	Plus custom_classes if set; id = Custom ID if set.
Module-level headings	.sw-pillar-accordion__headings, .sw-pillar-accordion__heading
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, .sw-pillar-accordion__items, .sw-pillar-accordion__item	.active when expanded.
Vertical bar	.sw-pillar-accordion__bar, .sw-pillar-accordion__bar--active, .sw-pillar-accordion__bar--inactive	Colors configurable via Style tab → Divider Settings (Active/Inactive Left Bar Color).
Header + panel	.sw-pillar-accordion__header-wrapper, .sw-pillar-accordion__header, .sw-pillar-accordion__panel	Header contains h3.
Panel content	.sw-pillar-accordion__panel-content-wrapper, .sw-pillar-accordion__panel-heading, .sw-pillar-accordion__panel-content
CTAs	.sw-pillar-accordion__cta
Image (right)	.sw-pillar-accordion__image-side, .sw-pillar-accordion__image-side--hide-md, .sw-pillar-accordion__image-side--hide-sm	Hide ≤992px (Disable on Tablet and Below) / ≤767px (Disable on Mobile).
Image img	.sw-pillar-accordion__image, .sw-pillar-accordion__image-item

Breakpoints: Small (SM) ≤767px; Medium (MD) 768–991px; Large (XL) ≥992px.

Document Version

Module: SW Pillar Accordion (master). Doc last updated: 2026-02-16. 2026-02-16: Content Settings (text alignment for main content); Panel Content Settings (text alignment for panel content); Content Colors (text/link colors); Image Settings: Disable Image on Tablet and Below (≤992px), Disable Image on Mobile (≤767px), Override Image Border Radius; Border Settings renamed to Divider Settings; Module Spacing renamed to Module Settings (default 50px top, 25px right/bottom/left). When the module changes materially, this page is updated; use this URL to always have the latest version.

SW Quiz Simple

Overview

SW Quiz Simple is the Smithworks linear quiz module: visitors answer questions in order, see a weighted result, and can submit a HubSpot form on the results screen. There is no separate “Interactive Quiz” module in the theme—that name referred to an unfinished experiment that was rolled into this module.

Use this document when: The user asks about configuring the quiz, form embed on results, scoring, contact properties, or tracking.

Downloadable reference

Module Documentation: Download Here — Download SW Quiz Simple — AI Agent Reference (Text)

Module path: smithworks-2025/sw-modules/SW Quiz Simple.module

Document Version

Module: SW Quiz Simple (smithworks-2025). AI hub updated: 2026-03-24. 2026-03-24: In-page section added; obsolete SW Interactive Quiz references removed from marketer FAQs and theme docs. 2026-03-24 (later): Downloadable SW-Quiz-Simple.txt links Zapier/setup guides to docs/archive/sw-interactive-quiz-2026-03/ (moved from docs/temp/).

SW SEO Schema

Theme partial (not a drag-and-drop module). Outputs Schema.org JSON-LD in the page <head> for Organization and WebSite. Included from templates/header.html immediately after HubSpot’s standard header-includes output (the standard_header_includes token in that file).

Module Documentation: Download Here — Download SW SEO Schema — AI Agent Reference (Text)

Partial path: smithworks-2025/sw-partials/sw-seo-schema.html
Use this document when: The user asks about structured data, JSON-LD, Organization / WebSite schema, Google Rich Results, missing addressCountry, or invalid Organization.url (e.g. https:///). Also when they cannot find “company domain” after the HubSpot UI moved branding out of old Settings → Website → Pages → Branding.

Overview

The partial renders a <script type="application/ld+json"> block with a @graph containing:

• WebSite — when a canonical site URL and display name resolve.
• Organization — when the marketing email footer includes a company name; includes url, logo (Brand Kit), and PostalAddress when address fields are present.

Organization url is the site homepage origin (from HubL company_domain / logo link), not the URL of the current page. Seeing homepage URL in Rich Results while testing a blog URL is expected.

Process reference (developers): docs/PROCESS-SEO-SCHEMA-ROLLDOWN.md in the HubSpot workspace repo.

Email footer (required for Organization name and address)

Same source as SW Simple Footer copyright name: HubSpot site_settings.company_* from the marketing email footer / office location record.

Where (step by step):

1. Settings (gear) → Marketing → Email
2. Configuration tab → Footer addresses
3. Create or edit an email footer — complete Company name, address lines, city, state/province, zip/postal code, and Country

Country: The theme maps common US spellings (e.g. United States, United States of America, USA) to ISO US for addressCountry. If country is empty or unrecognized, validators may report missing or weak address data.

Not from: Settings → Account defaults → Company information (separate from email footer for this HubL data).

Help: Edit office location information in email footers

Brand: Logo URL (canonical site / company_domain)

HubSpot’s HubL variable company_domain is documented as the value from the account logo link. Legacy docs say Website → Pages → Branding → Logo link; that menu often redirects to Content → Brand in the current UI. There is typically no separate “company domain” field on Brand Overview alone—use the logo panel.

Where (current UI):

1. Main menu → Content → Brand (Brand Identity)
2. Brand Kit → Logos → open the default logo
3. Set Logo URL (“This URL is where the logo will link to when clicked.”) to your real homepage, e.g. https://www.example.com

Website Crawl on Brand Overview is for brand/AI context; it does not replace setting Logo URL for company_domain.

Help: Edit your brand’s logo, favicon, brand colors, fonts, and theme (HubSpot Knowledge Base)

Troubleshooting

• Organization.url is https:/// or @id is https://#organization — Logo URL is wrong (e.g. /, or https:// with no host). Fix under Content → Brand → Logos on the default logo.
• Missing addressCountry — Set Country in Marketing → Email → Configuration → Footer addresses.
• No Organization block at all — Ensure email footer has Company name saved.

Related

• SW Simple Footer — same site_settings.company_name source for copyright.
• First-Time Checklist → 1b. Marketing: Email footer

Document Version

Asset: SW SEO Schema partial (smithworks-2025). Doc last updated: 2026-03-23. 2026-03-23: Initial SW AI Documentation section and SW-SEO-Schema.txt; email footer path; Content → Brand → Logos → Logo URL for canonical site; troubleshooting for bad company_domain; First-Time Checklist and Quickstart cross-links. Template version 2026.03.23.23.48.

SW Simple Hero

Module Documentation: Download Here — Download SW Simple Hero — AI Agent Reference (Text)

Module name: SW Simple Hero
Use this document when: The user asks about the SW Simple Hero HubSpot module—hero height, spacing, background (image/color/gradient/video), headings repeater, or CTA buttons.

In this section: Default state· Purpose and When to Use· Module Structure· Configuration Reference· Background image: size, position, repeat· Background width vs. content width· Document Version

Purpose and When to Use

SW Simple Hero is a hero section with headings (repeater), rich text content, optional background (image, color, gradient, video), and up to two CTA buttons. It uses standard Module Settings (Style tab, first group), Module Background Settings (Style tab, second group), and Module Background Video (Content tab, last group). See Module Settings and Background Standards below.

Module Structure

Content tab: Custom ID, Custom Classes → Headings (repeater) → Content Area, Text Color → Module Background Video (last; visible when Style → Module Background Settings → Background Option = Video) → CTA Buttons.

Style tab: Module Settings (first) → Module Background Settings (second: Background Option, then color/gradient/image/video fields) → Content Colors (Text Color, Link Colors: Theme Defaults (auto), On Dark Background, On Light Background) → Text Box Settings.

Configuration Reference

Module Settings (Style, first group): Spacing; Max Module Width (Default/Small/Large/Full Width/Custom) and Max Module Width (px) when Custom; XL Module Height (Minimum Height: Default, Custom Height, Full Screen; Height (px) when Custom; Vertical Alignment); Override Desktop/Tablet/Mobile Height (toggle, Minimum Height, Height (px), Vertical Alignment). Height modes: Default = no minimum; Custom Height = use px value; Full Screen = 100vh minus header.

Module Background Settings (Style, second group): Background Option (Theme Color, Custom Color, Gradient, Image, Video). When Image: XL Background Image (overlay, base color, image, Background Position, Background Repeat, Background Size) and Override Desktop/Tablet/Mobile Background Image groups. When Video: overlay, base color, and playback toggles (Autoplay, Loop, Muted, Plays Inline) here; video source and poster in Content → Module Background Video.

Content Colors: Text Color and Link Colors for the Content Area rich text. Link Colors use Theme Defaults (auto), On Dark Background, On Light Background.

Alias mapping: Existing instances had data at style.general_banner_settings and style.background_image; these are aliased to style.module_settings and style.module_background_settings so existing page data is preserved.

Background image: size, position, repeat

When Background Option = Image, each image group (XL and, when overridden, Desktop/Tablet/Mobile) includes:

• Background Size — Cover (fill area, may crop), Contain (fit inside, may letterbox), Stretch to Fill (100% width and height), Natural Size (intrinsic size). Maps to CSS background-size. See MDN background-size.
• Background Position — Nine named (e.g. Top Left, Middle Center, Bottom Right) or Custom (from edge) with horizontal/vertical edge and offset. Maps to CSS background-position. See MDN background-position.
• Background Repeat — No Repeat, Tile (repeat), Repeat Horizontally (repeat-x), Repeat Vertically (repeat-y). Maps to CSS background-repeat. See MDN background-repeat.

Direct users to Style → Module Background Settings → (XL or override group) to change how the background image is applied.

Background width vs. content width

The hero background (image, color, gradient, video) is full-bleed — it fills the width of the section that wraps the module. The hero content (text + image column) is constrained by Module Settings > Max Module Width and centered. There is no module-level setting to contain the background inside the module width.

To contain the background within a certain width (e.g. 1800px): set a width on the outer section that wraps the SW Simple Hero module — e.g. in the page template or section/section group settings, set the section’s max-width (and margin auto to center). The module sits inside that section; the background will then be contained within the section’s width. Do not direct users to a module setting for this; the solution is section-level.

Document Version

Module: SW Simple Hero (smithworks-2025). Doc last updated: 2026-02-12. 2026-02-12: Button Size (Small/Default/Large) in CTA button repeater. 2026-02-04: Video playback toggles (Autoplay, Loop, Muted, Plays Inline). Use the downloadable .txt for full reference.

SW Simple Header

Live example: The header at the top of this page is SW Simple Header. See it in context above.

Module Documentation: Download Here — Download SW Simple Header — AI Agent Reference (Text)

Module path: smithworks-2025/sw-modules/SW Simple Header.module
Use this document when: The user asks about the SW Simple Header HubSpot module—what it does, how to configure logo, navigation, buttons, mobile menu, announcement bar, top bar, Simple Link style, Menu position (In header vs Below header), spacing when the menu is in the header, or what to do when the menu is too large to fit; how to link text in the top bar; how to change top bar icon color (including when Simple Link Font color doesn’t work); how to change the menu dropdown arrow icon; or gradient buttons.

In this section: Default state· Overview· Module Structure· Announcement Bar & Top Bar· Configuration Reference· Spacing when menu is in header· When the menu is too large to fit· Top bar icon color· Menu dropdown arrow· Common Tasks· When to Use Custom CSS· Appendix· Document Version

Overview

SW Simple Header is a global header module with logo, navigation menu, optional CTA buttons, and a mobile hamburger drawer. It includes an announcement bar (optional, slides down from top) and top bar (optional, one or two columns for buttons, text, or rich text) above the main header content. It supports Menu position: In header (menu in the same row as logo and buttons) or Below header (menu in a full-width row under the header). It uses standard Module Settings (Style tab) for wrapper spacing and max width, Module Background Settings for background (color, custom, gradient, image, video), and Module Background Video (Content tab) when Background Option = Video.

Module Structure

Content tab: Custom ID, Custom Classes → Logo → Navigation (Menu, Max Dropdown Levels) → Buttons (repeater) → Announcement Bar (Enable, Content, Delay, Hide Duration) → Top Bar (Layout None/One/Two columns; Primary/Second column content types, alignment, buttons/text repeater/rich text) → Mobile Menu Icon → Module Background Video (last; visible when Style → Background Option = Video).

Style tab: Module Settings → Module Background Settings → Header Behavior → Menu Colors → Menu Fonts → Menu Layout → Announcement Bar Style (when announcement enabled) → Top Bar Style (when top bar layout ≠ None; includes Simple Link Font for all Simple Link buttons in top bar).

Announcement Bar & Top Bar

Announcement Bar (Content): Enable toggle; Rich text content; Delay (seconds); Hide Duration (hours, minutes). When enabled, bar slides down from top after delay; close button hides site-wide for duration (localStorage). Announcement Bar Style (Style): Background Option (Theme Color, Custom Color, Gradient), Text Color, Link Colors (Theme Defaults (auto), On Dark Background, On Light Background), Height, Padding, Max Width, border radius options. Bar has 10px margin bottom; 10px spacing from edges. When closed, negative margin hides bar and gap.

Top Bar (Content): Layout None | One Column | Two Columns. When One or Two: Primary Column (Content Type: Buttons, Text Repeater, or Rich Text; Alignment; Show on mobile). Secondary Column when Two Columns. Linking text: You cannot link plain text directly. Use Simple Link buttons (Content type = Buttons, Button style = Simple Link) for individual links, or Rich text and add links via the editor’s link tool. Text Repeater items are plain text only; they are not clickable. Top Bar Style (Style): Background (Theme Color Dark default), Font Color (#FFFFFF default), Spacing (margins 0, padding 10px 25px). Simple Link Font (inside Top Bar Style): Font (XL + Override Desktop/Tablet/Mobile). Font object includes size; no Link Colors field—links inherit from top bar. Font fields include a color picker but do not control hover; use Menu Colors for link colors.

Margins for items: Right alignment: margin-left 20px except first. Left: margin-right 20px except last. Center: both sides 10px. Mobile: both sides 10px. Same for Text Repeater items.

Top bar icon color (when Simple Link Font color doesn’t work)

Simple Link Font sets color for both text and icons when Button Style = Simple Link. If the icon does not turn the desired color:

• Uploaded image (SVG/PNG): The module cannot recolor it. Upload a white (or desired color) version of the icon and select it in the button’s Icon picker.
• Built-in icon (Font Awesome): Add custom CSS to force the color. Example (Site header HTML or theme CSS override): .sw-site-topper__top-bar .sw-site-topper__btn--simple-link i, .sw-site-topper__top-bar .sw-site-topper__btn--simple-link svg { color: #ffffff !important; fill: #ffffff !important; } Replace #ffffff with the desired color. Publish and hard-refresh.

Configuration Reference

Module Settings (Style, first group): Spacing (margin/padding on module wrapper; default 25px padding), Max Module Width (Default/Small/Large/Full Width/Custom), Max Module Width (px) when Custom.

Header Behavior: Header Position (Sticky | Static); Use mobile menu at XL (1200px+), at Desktop (LG) (992–1199px), at Tablet (MD) (768–991px).

Menu Layout: Menu Alignment (left, center, right), Menu Position (In header | Below header). When Below header: Menu Section Spacing (margin/padding for the menu row only), Menu section & mobile background (Same as header, Theme Color, Custom Color).

Announcement Bar Style: Visible when Announcement Bar enabled or Top Bar Layout ≠ None. Background (Theme Color Light default), Height, Padding, Max Width.

Top Bar Style: Visible when Top Bar Layout = One or Two Columns. Background (Theme Color Dark default), Font Color (#FFFFFF), Spacing. Simple Link Font (font, size; no Link Colors field—links inherit from top bar). Font fields include a color picker but do not control hover; use Menu Colors for link colors.

Spacing when menu is in the header

When Menu position is In header, the navigation menu sits in the same single row as the logo (left) and the buttons (right). That row has fixed horizontal space: it is constrained by Module Settings → Spacing (padding on the module wrapper), Max Module Width, and the fact that logo + menu + buttons must all fit in one line. There is no separate spacing field for the menu area when the menu is in the header—only the overall module spacing applies.

If the menu has many items or long labels, it can overflow or wrap. Reducing wrapper padding can free a little space but also makes the whole header tighter. When the user says the menu doesn’t fit or looks cramped with Menu position = In header, use the options in the next section.

When the menu is too large to fit

If the menu is too large to fit comfortably in the header row (Menu position = In header), there are two main options. Do not tell users there is a “menu-only” spacing control when In header; there is not.

Option A: Move the menu below the header

• Style → Menu Layout → Menu Position = Below header.
• The menu moves to a full-width row below the logo/buttons row, with Menu Section Spacing (margin and padding for that row only) and Menu section & mobile background for styling.
• Use this when the user wants all nav items visible on desktop in a horizontal bar and is okay with a two-row header.

Option B: Use the mobile menu at larger breakpoints

• Style → Header Behavior: turn on Use mobile menu at XL (1200px+), or Use mobile menu at Desktop (LG) (992–1199px), or Use mobile menu at Tablet (MD) (768–991px).
• When enabled, at that breakpoint the horizontal nav is hidden and the hamburger menu (drawer) is shown instead. The menu items appear in the drawer, not in the header row.
• Use this when the user wants to keep a single-row header but is okay with the hamburger/drawer at larger breakpoints so the menu doesn’t have to fit in the constrained space.

Summary: “Menu doesn’t fit in the header” → Offer Option A (Menu position = Below header) and/or Option B (Use mobile menu at XL/Desktop/Tablet). “I want the menu in a full-width row” → Menu Position = Below header. “I want hamburger on desktop so the top row isn’t crowded” → Header Behavior → Use mobile menu at XL (or Desktop/Tablet) = ON.

Menu dropdown arrow (not configurable)

The arrow/caret next to menu items that have submenus is not a module field. It is hardcoded in the template as a Unicode character (▾) inside .sw-simple-header__menu-caret. To change it: (1) Edit the module template (module.html) in a theme override/fork, or (2) Use CSS: hide the default with .sw-simple-header__menu-caret { display: none; }, then add a custom icon via ::after on .sw-simple-header__menu-link--toggle, or use background-image with an SVG. Selector: .sw-simple-header__menu-caret (inside .sw-simple-header__menu-link--toggle, within .sw-simple-header__menu-item--has-submenu).

Common Tasks (“How Do I…”)

• Enable announcement bar → Content → Announcement Bar → Enable = ON. Set content, delay, hide duration. Style → Announcement Bar Style for background, height, padding.
• Add top bar (buttons, text, or rich text) → Content → Top Bar → Top Bar Layout = One Column or Two Columns. Set Primary Column content type (Buttons, Text Repeater, Rich Text), alignment. Style → Top Bar Style for background, font color, Simple Link Font.
• Link text in the top bar → Use Simple Link buttons (Content type = Buttons, Button style = Simple Link) or Rich text with links added in the editor. Plain text / Text Repeater items cannot be linked.
• Use Simple Link style in top bar → Content → Top Bar → Primary (or Second) Column → add button with Button Style = Simple Link. Font/color from Style → Top Bar Style → Simple Link Font.
• Change top bar icon color when Simple Link Font doesn’t work → If icon is uploaded image: upload a white/desired-color version. If built-in icon: add CSS .sw-site-topper__top-bar .sw-site-topper__btn--simple-link i, .sw-site-topper__top-bar .sw-site-topper__btn--simple-link svg { color: #ffffff !important; fill: #ffffff !important; }
• Change the menu dropdown arrow → Not configurable via module. Use custom CSS (hide .sw-simple-header__menu-caret, add custom icon via ::after on .sw-simple-header__menu-link--toggle) or edit the module template.
• Move the menu to a full-width row below the logo/buttons → Style → Menu Layout → Menu Position = Below header. Then set Menu Section Spacing and Menu section & mobile background as needed.
• Show hamburger menu at desktop/tablet so the menu isn’t cramped → Style → Header Behavior → Use mobile menu at XL (or at Desktop (LG), or at Tablet (MD)) = ON.
• Change menu alignment (left/center/right) → Style → Menu Layout → Menu Alignment.
• Change header spacing → Style → Module Settings → Spacing.
• Add or edit buttons → Content → Buttons (repeater). Button Text, Button Link, Button Style, Add Icon, Show in header on mobile, Show in mobile menu.
• Change menu or hamburger colors → Style → Menu Colors (main menu, hamburger icon, submenu). Use Menu Colors for link colors including hover—font fields include a color picker but do not control hover.
• Change menu font/size → Style → Menu Fonts (XL + Override Desktop/Tablet/Mobile). Font object includes size. For link colors (including hover), use Menu Colors.
• Sticky vs static header → Style → Header Behavior → Header Position (Sticky | Static).

When to Use Custom CSS

Use custom CSS when the change cannot be done via Content or Style fields (e.g. custom gap between menu items, logo size beyond override, drawer animation, top bar icon color when Simple Link Font doesn’t work, menu dropdown arrow, gradient buttons). Individual CTA buttons cannot be styled with gradients via module fields; use custom CSS with a unique Custom Class. Add overrides in the theme’s custom-styles.css. Use the CSS classes in the Appendix below.

Appendix: CSS Classes and Selectors

Element	Class(es)	Notes
Module wrapper	.sw-simple-header	Plus custom_classes if set; id = Custom ID if set. Modifiers: .sw-simple-header--sticky, .sw-simple-header--menu-below (when Menu position = Below header).
Inner (header row)	.sw-simple-header__inner	Flex row: logo, nav wrap, right (hamburger + buttons).
Logo	.sw-simple-header__logo, .sw-simple-header__logo-link, .sw-simple-header__logo-img
Nav wrap (desktop)	.sw-simple-header__nav-wrap	Alignment: .sw-simple-header__nav-wrap--left, --center, --right.
Nav / menu list	.sw-simple-header__nav, .sw-simple-header__menu, .sw-simple-header__menu-item, .sw-simple-header__menu-link, .sw-simple-header__menu-link--toggle, .sw-simple-header__menu-caret, .sw-simple-header__submenu	Menu caret (dropdown arrow) is .sw-simple-header__menu-caret; not configurable via module.
Menu section (below header)	.sw-simple-header__menu-section, .sw-simple-header__menu-section-inner	When Menu position = Below header.
Right (hamburger + buttons)	.sw-simple-header__right
Hamburger / close	.sw-simple-header__toggle, .sw-simple-header__toggle--open, .sw-simple-header__toggle--close, .sw-simple-header__hamburger, .sw-simple-header__close-x
Buttons	.sw-simple-header__buttons, .sw-simple-header__header-btn
Drawer (mobile)	.sw-simple-header__drawer, .sw-simple-header__drawer-header, .sw-simple-header__drawer-icon-img
Announcement bar	.sw-site-topper__announcement-wrapper, .sw-site-topper__announcement-wrapper--closed, .sw-site-topper__announcement	Margin-bottom 10px; when closed, margin-top calc(-height - 10px). CSS var --sw-site-topper-announcement-height.
Top bar	.sw-site-topper__top-bar, .sw-site-topper__top-bar-row, .sw-site-topper__top-bar-col, .sw-site-topper__buttons, .sw-site-topper__btn--simple-link, .sw-site-topper__text-items, .sw-site-topper__text-item	Alignment: --align-left, --align-center, --align-right.

Data attributes: data-menu-position (in_header | below_header), data-menu-alignment, data-mobile-menu-at-xl, data-mobile-menu-at-lg, data-mobile-menu-at-md, data-position (sticky | static). Breakpoints: XL 1200px+; Desktop (LG) 992–1199px; Tablet (MD) 768–991px; Mobile (SM) ≤767px.

Document Version

Module: SW Simple Header (smithworks-2025). Doc last updated: 2026-02-27. 2026-02-27: Font fields include color but do not control hover; use Menu Colors for link colors (menu and top bar). Removed Link Colors from Simple Link Font (links inherit from top bar). 2026-02-24: Top bar linking text; top bar icon color workarounds; menu dropdown arrow; gradient buttons. 2026-02-12: Header Behavior; Use mobile menu at XL, Desktop (LG), Tablet (MD). 2026-02-10: Announcement Bar; Top Bar; Simple Link Font; spacing constraints; options when menu too large.

SW Simple Footer

Live example: The footer at the bottom of this page is SW Simple Footer. See it in context below.

Module Documentation: Download Here — Download SW Simple Footer — AI Agent Reference (Text)

Module path: smithworks-2025/sw-modules/SW Simple Footer.module
Use this document when: The user asks about the SW Simple Footer HubSpot module—what it does, how to configure logo, navigation, buttons, social icons, Copyright Information (copyright line toggles, company name override, email-footer fallback), footer links, Back to Top button, content colors (Content Area, Menu, Footer Links), module background, or footer alignment.

In this section: Default state· Overview· Module Structure· Copyright Information· Content Colors· Back to Top· Configuration Reference· Common Tasks· Document Version

Overview

SW Simple Footer is a global footer module with logo, navigation menu, optional CTA buttons, rich text, social icons, a configurable copyright / attribution row, simple links (e.g. Privacy, Legal, Contact), and an optional Back to Top button. It uses standard Module Settings (Style tab) for wrapper spacing (default 50px top/bottom, 25px left/right) and max width, Module Background Settings for background (theme color, custom, gradient, image, video; default Theme Color / Dark), Content Colors for Text Color (footer body text) and a single Link Colors control (Theme Defaults (auto), On Dark Background, On Light Background) that applies to rich text links, menu links, footer links repeater, and the “Powered by Smithworks” link, and Module Background Video (Content tab) when Background Option = Video. Copyright Information (Content tab) controls Add Copyright Line (hides ©, year, company segment, and the middle dot before “Powered by Smithworks” when off; attribution still shows), Add Company Name, and optional Company Name text that overrides site_settings.company_name when non-blank. When the override is blank, the name comes from Settings → Marketing → Email → Configuration → Footer addresses (email footer)—not Account defaults → Company information. See First-Time Setup: 1b. Marketing: Email footer (copyright name). The same footer record supplies address and country for SW SEO Schema (JSON-LD Organization).

Other modules in the global footer: On standard Smithworks themes, SW Simple Footer usually sits in the same global footer drag-and-drop area as optional modules such as SW Popup Panel or SW CTA Popup. Add those via Edit global content → SW Global Site Footer (see SW Popup Panel → Site-wide: global footer (content editor)), not inside SW Simple Footer’s Content tab.

Module Structure

Content tab: Custom ID, Custom Classes → Logo → Navigation (Menu) → Buttons (repeater) → Rich Text Box (Content Area, Content style) → Social Icons (repeater) → Copyright Information (Add Copyright Line, Add Company Name, Company Name override) → Footer Links (repeater: Link Text, Link, Add Icon, Icon) → Back to Top (Enable, Override Colors, Background/Icon/Icon Hover) → Module Background Video (last; visible when Style → Background Option = Video).

Style tab: Module Settings → Module Background Settings → Content Colors → Footer Alignment (Alignment + Override Desktop/Tablet/Mobile).

Rendered order: The copyright row usually appears between social icons and footer links on the page even though Copyright Information follows Social Icons in the sidebar (intentional layout).

Copyright Information

Add Copyright Line (toggle, default on): When off, the module does not output ©, the year, the company name segment, or the separator dot before “Powered by Smithworks”; the Smithworks attribution link still appears.

Add Company Name (toggle, default on; visible when copyright line is on): When off, no name appears after the year.

Company Name (text): Optional override. Blank = HubSpot site_settings.company_name from the marketing email footer (1b). Non-blank replaces that value for this module instance.

Content Colors

Text Color: Footer content text. Theme defaults, Primary, Secondary, Tertiary, White, Black, Dark, Light, Custom (with Custom Text Color hex). Default: Theme defaults.

Link Colors: One dropdown for link contrast: Theme Defaults (auto), On Dark Background, On Light Background. Applies to rich text links, navigation menu links, Footer Links repeater items, and the Smithworks attribution link. Matches sw-master field styles.content_colors.link_context.

Back to Top

Content → Back to Top: Enable Back to Top (default ON). When enabled: floating button appears after scrolling 600px; hidden when within 20px of top. Centered at bottom of viewport with 10px clearance. Spacer div (4.5rem) added at bottom of footer so button never covers content. Smooth scroll to top on click. Override Colors: When ON, set Background Color, Icon Color, Icon Hover Color. Default when not overridden: dark background (#1a1a1a), white icon.

Configuration Reference

Module Settings (Style, first group): Spacing (default 50px top/bottom, 25px left/right), Max Module Width (Default/Small/Large/Full Width/Custom), Module height groups.

Module Background Settings: Background Option (Theme Color, Custom Color, Gradient, Image, Video). Default: Theme Color / Dark.

Content Colors: Text Color (footer text); Link Colors (single control for all footer links as above).

Footer Alignment: Alignment (left/center/right) for XL; Override Desktop/Tablet/Mobile with per-breakpoint alignment. All content blocks (logo, menu, buttons, social, copyright, links) follow footer alignment.

Social Icons: Presets Facebook, LinkedIn, X, Instagram, YouTube, TikTok, Custom. Override Colors for custom icon and hover colors. When OFF, icons inherit Content Colors.

Footer Links: Link Text, Link, Add Icon, Icon (position: Left/Right/Icon Only). Icon Only shows only the icon; link text becomes aria-label.

Copyright Information: Add Copyright Line, Add Company Name, Company Name (override). Fallback for blank override: Settings (gear) → Marketing → Email → Configuration → Footer addresses → email footer company name → site_settings.company_name. Account defaults → Company information does not drive that token.

Common Tasks (“How Do I…”)

• Enable/disable Back to Top → Content → Back to Top → Enable Back to Top.
• Override Back to Top colors → Content → Back to Top → Override Colors = ON, then set Background, Icon, Icon Hover colors.
• Add social icons → Content → Social Icons (repeater). Add items; choose Preset or Custom. Override Colors for custom icon colors.
• Change footer alignment → Style → Footer Alignment → Alignment (left/center/right). Override Desktop/Tablet/Mobile for per-breakpoint alignment.
• Change content area text color → Style → Content Colors → Text Color.
• Change footer link contrast → Style → Content Colors → Link Colors (Theme Defaults (auto), On Dark Background, On Light Background).
• Change module background → Style → Module Background Settings → Background Option, then color/gradient/image/video fields.
• Add footer links (Privacy, Legal, Contact, etc.) → Content → Footer Links (repeater).
• Remove ©, year, name, and dot before Powered by → Content → Copyright Information → Add Copyright Line = OFF.
• Keep © and year but hide company name → Content → Copyright Information → Add Company Name = OFF.
• Override company name in this footer only → Content → Copyright Information → Company Name (non-blank).
• Set fallback name when override is blank → Settings (gear) → Marketing → Email → Configuration → Footer addresses → create or edit email footer; set company name. Feeds site_settings.company_name. Not Account defaults → Company information. Full steps: 1b. Marketing: Email footer (copyright name).

Document Version

Module: SW Simple Footer (smithworks-2025). Doc last updated: 2026-03-26. 2026-03-26: Overview: sibling modules (SW Popup Panel, SW CTA Popup) in global footer DnD; link to Popup Panel site-wide section. 2026-03-23 (later): Copyright Information group documented (Add Copyright Line, Add Company Name, Company Name override; email-footer fallback; rendered order note). Template version 2026.03.23.18.26. 2026-03-23 (earlier): Copyright company name: correct HubSpot path Settings → Marketing → Email → Configuration → Footer addresses (email footer); site_settings.company_name; not Account defaults Company information. Configuration Reference paragraph; Common Tasks updated. First-Time Checklist 1b + Quickstart. 2026-02-27: Content Colors: Rich Text Box/Content Area labels; Content Area Link Colors, Menu Link Colors, Footer Links Colors (each with Theme defaults/Dark/Light/Custom); Custom option with hex colors and text decoration (Theme defaults/Underline/None) for link and hover; Smithworks copyright link uses Content Area link colors; Footer Links Add Icon/Icon support. 2026-02-18: Content Colors defaults to Theme defaults per MODULE-CONTENT-COLORS-STANDARD. 2026-02-12: Back to Top (centered, 600px scroll threshold, 10px clearance, color override, spacer); social presets X/YouTube/TikTok; content colors scope; Powered by Smithworks; company name from site_settings only.

SW Text Headings

Module Documentation: Download Here — Download SW Text Headings — AI Agent Reference (Text)

Module name: SW Text Headings
Use this document when: The user asks about the SW Text Headings HubSpot module—heading text, display sizes, alignment, colors, spacing, module height, or background (color/gradient/image/video).

In this section: Default state· Purpose and When to Use· Module Structure· Configuration Reference· Common Tasks· When to Use Custom CSS· Appendix· Document Version

Purpose and When to Use

The SW Text Headings module provides:

• Heading repeater for one or more headings with independent size, display size, color, alignment, padding overrides, and responsive display overrides.
• Background options including theme color, custom color, gradient, responsive images, or video background (HubSpot Video, video file, or external embed).
• Module Settings and Module Background Settings per Module Settings and Background Standards (spacing, max width, minimum height with Default/Custom/Full Screen, and vertical alignment).

Use it for simple hero banners, section separators, or heading-only rows with optional background imagery or video.

Module Structure (What You See on the Page)

1. Module wrapper — Full-width container with optional background and spacing.
2. Background (optional) — Image/Color/Gradient/Video based on Module Background Settings.
3. Headings — One or more heading items rendered in order.

Configuration Reference

The module has Content and Style tabs. Group and field names match the HubSpot editor.

Content Tab

• Custom ID / Custom Classes — Optional.
• Headings (repeater) — Heading text/HTML, semantic Size, Display Size, Color/Custom Color, Align (default: Center), Override Padding (Top/Bottom), CSS Class; Override Text Alignment (Tablet), Text Alignment (Tablet), Override Text Alignment (Mobile), Text Alignment (Mobile); Override Tablet Display Size, Tablet Display Size, Override Mobile Display Size, Mobile Display Size.
• Module Background Video — Always last. Visible when Style → Module Background Settings → Background Option = Video. Video Type (HubSpot Video, Video from files, External Embed), HubSpot Video, Video File, External Embed, Poster image. Overlay, base color, and playback toggles (Autoplay, Loop, Muted, Plays Inline) are in Style tab when Video. See Module Settings and Background Standards.

Style Tab

• Module Settings (first) — Spacing, Max Module Width, module height groups (XL + Desktop/Tablet/Mobile overrides), vertical alignment. Minimum Height choices: Default (content height), Custom Height, Full Screen.
• Module Background Settings (second) — Background Option (Theme Color, Custom Color, Gradient, Image, Video) with responsive image groups and color/gradient fields. When Video: overlay, base color, playback toggles (Autoplay, Loop, Muted, Plays Inline) here; source and poster in Content tab.

Common Tasks (“How Do I…”)

• Change heading text or size → Content → Headings (repeater) → Heading, Size, Display Size.
• Adjust heading alignment or color → Content → Headings → Align, Color (or Custom Color).
• Set module to content height → Style → Module Settings → XL Module Height → Minimum Height = Default.
• Make hero full screen → Style → Module Settings → Minimum Height = Full Screen (use overrides for tablet/mobile if needed).
• Change heading alignment on tablet/mobile → Content → Headings → Override Text Alignment (Tablet/Mobile) ON → Text Alignment (Tablet/Mobile).
• Add video background → Style → Module Background Settings → Background Option = Video (overlay, base, playback here), then Content → Module Background Video (source, poster).
• Change background image → Style → Module Background Settings → Background Option = Image and set responsive images.
• Change spacing → Style → Module Settings → Spacing.

When to Use Custom CSS

Use custom CSS when the change cannot be done via Content or Style fields (e.g. special typography or custom spacing rules). Add overrides in your theme’s custom-styles.css and target the selectors below.

Appendix: CSS Classes and Selectors

Element	Class(es)	Notes
Module wrapper	.sw-text-headings	Plus custom_classes if set; id = Custom ID if set. Modifiers: .sw-text-headings--has-bg-image, .sw-text-headings--has-bg-video.
Inner container	.sw-text-headings__inner	Max width and alignment container.
Headings wrapper	.sw-text-headings__headings	Wraps heading repeater.
Heading	.sw-text-headings__heading	Also includes .heading class.
Video wrapper	.sw-text-headings__video-wrap	Background video wrapper.

Document Version

Module: SW Text Headings (smithworks-2025, sw-theme-elements). Doc last updated: 2026-02-04. 2026-02-04: Video overlay, base, playback toggles in Style tab. State 3 heading repeater: Override Text Alignment (Tablet/Mobile), Text Alignment (Tablet/Mobile), Override Tablet/Mobile Display Size. Align default: Center. See Module Settings and Background Standards below.

Module Settings and Background Standards

Many SW modules (e.g. SW Text Headings, SW Button) share the same structure for Module Settings, Module Background Settings, and Module Background Video. Use this section when directing users to those groups or when explaining tab order and field names. Reference implementation: SW Text Headings.

Tab and group order

Tab	Order	Group name	Notes
Style	1st	Module Settings	First group in Style tab.
Style	2nd	Module Background Settings	Second group in Style tab.
Content	Last	Module Background Video	Must be the last Content-tab group. No exceptions. Visible when Background Option = Video.

Module Settings (Style tab, first group)

Standard fields in order: Spacing (margin/padding), Max Module Width (Default, Small, Large, Full, Custom; when Custom, set pixels), then height groups with vertical alignment.

Height groups: XL Module Height (breakpoint 1200px+), then Override Desktop Height (992–1199px), Override Tablet Height (768–991px), Override Mobile Height (≤767px). Each group has:

• Minimum Height — Choices: Default (no min-height; content dictates height), Custom Height (then set Height in px), Full Screen (100vh minus header).
• Height (px) — Visible only when Minimum Height = Custom Height.
• Vertical Alignment — Top, Middle, or Bottom for that breakpoint.

Spacing note: Module Settings spacing applies to the module wrapper. When no padding is set, use no padding (no default 25px). In modules with a flex layout and an inner content wrapper (e.g. SW Button), padding may apply to the inner wrapper; margin applies to the outer. When a module has multiple spacing fields (e.g. Text Box Padding), each applies to its intended target only.

Module Background Settings (Style tab, second group)

Background Option — Theme Color, Custom Color, Gradient, Image, or Video. When Image: responsive image groups (XL, then Override Desktop/Tablet/Mobile) with image, overlay, base color, Background Position (named or Custom from edge), Background Repeat (No Repeat, Tile, Repeat Horizontally, Repeat Vertically), and Background Size (Cover, Contain, Stretch to Fill, Natural Size). These map to standard CSS background-position, background-repeat, and background-size; for full behavior see MDN background-size, background-position, background-repeat or the module’s downloadable doc. When Color/Custom/Gradient: use the corresponding color or gradient fields. When Video: overlay, base color, and playback toggles (Autoplay, Loop, Muted, Plays Inline) appear here; configure the video source and poster in the Content tab (Module Background Video group).

Module Background Video (Content tab, last group only)

Visible when Style → Module Background Settings → Background Option = Video. Content tab fields:

• Video Type — HubSpot Video, Video from files, or External Embed.
• HubSpot Video / Video File / External Embed — Depending on Video Type.
• Poster image — Optional placeholder before video loads.

Style tab (when Video): Background Color Overlay, Background Base Color, and playback toggles (Autoplay, Loop, Muted, Plays Inline).

Key field names (for implementers)

Group names: module_settings, module_background_settings, background_video_settings. Key fields: spacing, max_module_width, module_height_xl_group (and lg/md/sm groups), background_option, video_source_type. Labels may vary by theme; these names keep templates and CSS working.