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.

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. If the user asks about an SW module that is not listed in the table of contents, direct them to request support from smithworks.marketing/hubspot-development.
• 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/hubspot-development.
• 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.

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/hubspot-development.

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	Repeater cards; icon/image/SVG/video per card; rich text; optional buttons	Feature cards; service cards; team cards; product cards; non-blog card layouts	Blog posts → SW Blog Cards or SW Blog Related Posts. Image beside content with headings/bullets/CTAs → SW Pillar Section. Accordion with image per panel → SW Pillar Accordion
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 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 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)

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.

In this section: Quickstart (Marketing User)· 1. Brand Kit· 2. Theme Settings· 2b. SW Theme Settings· 3. Header and Footer· 4. Blog Setup· 5. System Pages· 6. Quick Verification· Troubleshooting· Developer Appendix

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. 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.
4. 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.
5. Configure Footer (global). Open any page. Click the footer. Click “Edit global content.” Configure footer modules. Publish global content.
6. 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.
7. 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
• 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.

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

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

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

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.
• 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), 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. 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, 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. 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, 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 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).
• 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
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-02-24. 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.

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, Dark, Light). Card content links applies only when Read More = simple link. Content Area text and Content Area links (for rich text below cards) with same 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, Dark, Light). 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 = Dark or 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-02-24. 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; defaults Theme defaults); 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.

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

Use Cases

Feature overview (icon + heading + description + CTA per card); service offerings; team members; product highlights. When to choose another: Blog listing or related posts → SW Blog Cards or SW Blog Related Posts. Image beside content with headings/bullets/CTAs, alternating → SW Pillar Section. Accordion with image per panel → SW Pillar Accordion.

Related Modules

Module	Relationship
SW Blog Cards	Blog posts only. For blog listing pages.
SW Blog Related Posts	Blog posts only. For related posts on blog post pages.
SW Pillar Section	Image/video beside content with headings, bullets, CTAs. One section per instance; add multiple for alternating.
SW Pillar Accordion	Accordion panels with image that changes per panel.

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.

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-02-19. 2026-02-19: Slider clipping troubleshooting: when it occurs (smaller screens, too many per row), fix (reduce Cards per row for Tablet/Mobile). 2026-02-14: Added icon_width, icon_height per card. 2026-02-13: Initial AI documentation.

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.

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

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 (Theme Color Light default), Height, Padding, Max Width. 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, 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· 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, copyright (year + company name from Settings → Account & Billing), 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 and link colors (with separate controls for Content Area, Menu, and Footer Links), and Module Background Video (Content tab) when Background Option = Video. Company name comes from site_settings.company_name only (no module field). “Powered by Smithworks” appears after the company name with a dot separator and uses the Content Area link colors.

Module Structure

Content tab: Custom ID, Custom Classes → Logo → Navigation (Menu) → Buttons (repeater) → Rich Text Box (Content Area, Content style) → Social Icons (repeater) → 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).

Content Colors

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

Content Area Link Colors: Applies to rich text links and the “Powered by Smithworks” copyright link. Theme defaults, Dark, Light, or Custom. When Custom: Link Color (hex), Link Hover Color (hex), Link Text Decoration (Theme defaults/Underline/None), Link Hover Text Decoration. Default: Theme defaults.

Menu Link Colors: Applies to footer navigation menu links. Theme defaults, Dark, Light, or Custom. When Custom: Link Color, Link Hover Color, Link Text Decoration, Link Hover Text Decoration. Default: Theme defaults.

Footer Links Colors: Applies to Footer Links repeater items (Contact, Privacy, Legal, etc.). Theme defaults, Dark, Light, or Custom. When Custom: Link Color, Link Hover Color, Link Text Decoration, Link Hover Text Decoration. Default: Theme defaults.

Text decoration: Default = theme global settings. Override with Underline or None. Link color applies to active state; Link Hover applies to hover and focus. Per MODULE-CONTENT-COLORS-STANDARD.

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 (Content Area text); Content Area Link Colors (rich text + Smithworks copyright); Menu Link Colors; Footer Links Colors. Each link type: Theme defaults, Dark, Light, or Custom. When Custom: Link Color (hex), Link Hover Color (hex), Link Text Decoration, Link Hover Text Decoration. Per MODULE-CONTENT-COLORS-STANDARD.

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.

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 Content Area link colors → Style → Content Colors → Content Area Link Colors (Theme defaults/Dark/Light/Custom; when Custom set hex colors and text decoration).
• Change menu link colors → Style → Content Colors → Menu Link Colors.
• Change footer links colors → Style → Content Colors → Footer Links Colors.
• 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).
• Change company name → Settings → Account & Billing → Account default → Company information. No module field.

Document Version

Module: SW Simple Footer (smithworks-2025). Doc last updated: 2026-02-27. 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.