# SW Cards Blog — AI Agent Documentation **Module path:** `smithworks-2025/sw-modules/SW Cards Blog.module` **Last updated:** 2026.08.28.22.49 **Replacement for SW Blog Cards.** SW Blog Cards is deprecated (unavailable for new content). Existing Blog Cards instances keep working. Do **not** overwrite `SW Blog Cards.module` with this module. --- ## HubSpot video and file uploads (plans and limits) This module offers **video** options that may use **HubSpot Video**, **Video from files** (File Manager), and/or **external embed** (YouTube, Vimeo, etc.), depending on the field. - **HubSpot Video** (the built-in videoplayer / Marketing video library): Typically requires **HubSpot subscription features** for hosted video. If the option is missing or blocked, confirm your **hub type and tier** in HubSpot's product and pricing documentation. - **Video from files**: Uploads use the **File Manager**. On **Content Hub Free** and similar tiers, HubSpot commonly applies a **per-file upload size limit (often 20 MB)** and account storage limits. **Compress** the file, reduce resolution, or use **External embed** if upload fails or the file exceeds the limit. - **External embed**: Paste a supported **URL** (for example YouTube or Vimeo). This path usually does not require HubSpot's hosted video product. HubSpot's limits and SKUs change over time—**verify current rules for your portal** in HubSpot's help center. ## 1. Overview SW Cards Blog displays **blog posts** in a grid or slider. Chrome (Module Outer / Inner, Aurora, Animated, SVG overlay, heading panel, card Effect) matches **SW Cards**. The post loop matches **SW Blog Cards** (blog picker, tag filter, listing vs website fetch). Use it on **blog listing pages** and **website or landing pages**. For **related posts on a single blog post**, use **SW Blog Related Posts**. For **manual non-blog cards**, use **SW Cards**. **Do not** put a five-up / 5-column helper class on this module. Five-up is **SW Cards** only (a helper class the designer adds). It is never used on blog listing or blog-post card modules. **Critical:** Slider and infinite scroll are **mutually exclusive**. To use the slider, **turn off** Use infinite scroll. ### Related Modules | Module | Relationship | |--------|--------------| | **SW Blog Cards** | Deprecated predecessor. Same job historically. Use SW Cards Blog for new work. | | **SW Blog Related Posts** | Read-next row on **blog post** templates. | | **SW Cards** | Manual card repeater (not blog-driven). Five-up helper class lives here only. | | **SW Blog Listing Hero** | Featured post on listing page 1. Pair with Post start = 2 so the hero post is not repeated in the grid. | --- ## 2. Context-Specific Behavior ### 2.1 Blog Listing Page When the module is on a **blog listing template** (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. - **Slider:** Available when Use as slider is ON and posts exceed Cards per row (XL). Requires infinite scroll OFF. **Tag / author / all-posts views:** The module outputs **nothing** on `/blog/tag/`, `/blog/tagged/`, `/blog/author/`, and `/blog/all` (path fallbacks included). Those URLs use the listing template partials (search/sort lists + their own H1). Website and landing Cards Blog is unchanged. **Posts-per-page (blog setup):** HubSpot's `contents` only contains the number of posts set in **Marketing → Website → Blog → [Your Blog] → Templates → Number of posts per listing page**. **Formula:** HubSpot "Number of posts per listing page" = **Posts to show + (Post start − 1)**. Smithworks `/blog` defaults: **Posts to show 18**, **Post start 2** (listing hero skip) → set HubSpot posts per listing page to **19**. Too low = fewer cards than expected. Too high = posts skipped on page 2+. **Post start first page only:** When ON (default), the offset applies only on page 1. Use when SW Blog Listing Hero shows on first page. When OFF, the offset applies on every page. **Listing title:** Use this module's **Headings** repeater as the page H1 (default sample: Strategic Marketing Blog). **SW Blog Listing** no longer has a hardcoded H1 wrap. ### 2.2 Website or Landing Page - **Post source:** Fetches from the **Blog** field. Select the blog to pull from. - **Tag Filter blank:** Recent posts from the selected blog. - **Tag Filter set:** Only posts with that tag. - **Post start:** Default **2** is for listing + hero. On a home/Insights row with no listing hero, set **Post start = 1** so the newest post is not skipped. - **Infinite scroll:** Supported (On scroll or Load more). Uses `blog_recent_posts` with a HubL cap of **200**. HubSpot listing posts-per-page does **not** apply here. - **Slider:** Use as slider ON **and** infinite scroll OFF **and** more posts than Cards per row (XL). --- ## 3. Slider vs. Grid vs. Infinite Scroll | Mode | When it applies | Notes | |------|-----------------|-------| | **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 hidden when infinite scroll is ON. | | **Infinite scroll** | Use infinite scroll = ON (**website/landing only**). | Ignored on listing. Load trigger: On scroll or Load more. Chunk size = Posts to show. Max posts default 24 (cap 200). | **If the slider does not appear:** turn **off** Use infinite scroll, turn **on** Use as slider, and ensure more posts than Cards per row (XL). --- ## 4. Showcase Middle Card Style → Cards Layout → **Showcase Middle Card** (default **OFF**). When ON, the **middle card of each odd 3-up row** is slightly larger (~15px). Even rows and mobile 1-up **skip** the effect. This is a module toggle, not a per-post checkbox. This is **not** five-up. Do not add a 5-column helper class to this module. --- ## 5. Empty State When the query returns **no posts** (empty blog on a website/landing Insights row, or a tag filter with zero matches): - Centered message: **"Check back later for our latest content."** - Box sits between the headings (and heading buttons) and the footer CTA. Headings and the CTA still render. - Box styling follows card colors/border (same copy as deprecated SW Blog Cards). - Tag / author / all-posts listing URLs still hide the whole module (those views use listing partials, not this empty box). --- ## 6. Content Tab (Order) 1. **Custom ID** / **Custom Classes** 2. **Headings** (repeater) — Heading, Size, Display Size, Color, Align; tablet/mobile overrides; padding; CSS Class. Default sample: **Strategic Marketing Blog** as **H1** / display **H1**, center. 3. **Heading Button Repeater** — Optional buttons under the intro (Space Above Buttons, Icon Spacing, Hide Button Text, Override Button Margins). Default link: `https://smithworks.marketing/sw-module-documentation` 4. **Content Area** — Rich text between headings and cards 5. **Content style** — Typography for Content Area 6. **Footer Buttons** — Button Alignment + Buttons repeater (same extras as heading buttons) 7. **Blog** — Select blog (website/landing; ignored on listing) 8. **Tag Filter** — Optional 9. **Post Display Settings** — Posts to show (default **18**), Post start (default **2**), Post start first page only, Use infinite scroll, Max posts, Load trigger, Load more button (Header Simple extras) 10. **Post Card** — Featured image, Tags, Summary, Author, Date, Read More (text, style, size, icon). **Read More Primary** uses a filled `btn-wrapper` + inner `cta-button` so theme Buttons & Inputs text color applies (do not inherit card body text onto a dark Primary fill). --- ## 7. Style Tab (high level) Matches **SW Cards** outer/inner model: - **Module Outer Spacing** / **Max Module Outer Width** / **Module Inner Spacing** / **Max Module Inner Width**. Sample defaults from smithworks `/blog`: Outer **50/0/50/0**, Inner **0/0/0/0**. - **Module Outer Background** — Theme Color, Custom, Gradient, Image, Video, Aurora, Animated, SVG Overlay (appear/twinkle; Disable SVG Overlay per breakpoint). - **Module Inner Background** — including Inner Aurora / Effect. - **Heading Panel Settings** — optional styled wrap around heading + description + heading buttons. - **Content Colors** — Content Area vs Card text/links. Card content links apply when Read More = simple link. - **Cards Layout** — Cards per row (sample **3 / 3 / 2 / 1**), gutter, card colors, card Effect / rim, Showcase Middle Card, Enable Hover Effect (default **off**), Enable Card as Link (default **on**), tablet 2 per row. - **Slider settings** — visible only when infinite scroll is OFF. --- ## 8. Configuration Reference (key fields) ### Post Display Settings | Field | Purpose | |-------|---------| | Posts to show | Cards in the grid. Listing with 0 = HubSpot pagination. Infinite scroll = chunk size. Listing max = HubSpot posts per page − (Post start − 1). | | Post start | Skip first N posts (2 = skip first / listing hero). Website Insights with no hero: set **1**. | | Post start first page only | Default ON. Offset on page 1 only. | | Use infinite scroll | Website/landing only. OFF required for slider. | | Max posts | Cap when infinite scroll ON (default 24; HubL 200). | | Load more button | Text, style, size, icon extras when Load trigger = Load more. | --- ## 9. When to Use Custom CSS Use `custom-styles.css` for layout beyond Cards Layout, empty-state extras, or Blaze Slider chrome. **Do not** use a 5-up helper class on this module. --- ## 10. Common Tasks - **New blog listing or Insights row** → Insert **SW Cards Blog**, not SW Blog Cards. - **Related posts on a post template** → **SW Blog Related Posts**. - **Manual service/feature cards** → **SW Cards** (five-up helper class only there). - **Avoid double listing titles** → Heading in this module is the H1. Remove `.sw-blog-listing__page-title-wrap` from the listing template when swapping. - **Hero + grid alignment** → Post start = 2, Post start first page only ON, HubSpot posts per listing page = Posts to show + 1 (18 + 1 → **19**). - **Home Insights should include the newest post** → Post start = **1**. - **No posts yet** → Empty-state box between headings and CTA (“Check back later for our latest content.”). Publish a post to replace it with cards. - **Slider not showing** → Turn off infinite scroll. - **Load more on a website page** → Infinite scroll ON (ignored on listing). - **Middle card slightly larger** → Showcase Middle Card ON (3-up odd rows only). - **Make the whole card clickable** → Enable Card as Link ON (default). - **Primary Read More text color wrong** → Filled Primary uses theme button text; do not expect card body color on the fill. --- ## 11. Appendix: CSS Classes | Element | Class(es) | |---------|-----------| | Module wrapper | `.sw-cards-blog` | | Inner | `.sw-cards-blog__inner` | | Headings | `.sw-cards-blog__headings`, `.sw-cards-blog__heading` | | Grid | `.sw-cards-blog__grid` | | Card | `.sw-cards-blog__card`, `.sw-cards-blog__card--showcase` | | Slider | `.sw-cards-blog__slider`, `.blaze-slider` | | Infinite scroll | `.sw-cards-blog__infinite-scroll`, `.sw-cards-blog__chunk` | | Empty state | `.sw-cards-blog__empty-state` | --- ## 12. Document Version **Module:** SW Cards Blog (smithworks-2025 / master). **Master version number:** 2026.08.28.22.49. **Doc last updated:** 2026-08-28. **2026.08.28.22.49:** Added optional Header and Footer Panel settings with responsive alignment and spacing, panel backgrounds, borders, and full-panel Glass, Grain, or Pattern effects. Footer Content groups footer headings, rich text, style, and buttons. Auto headings inherit the matching content color and alignment; existing blog query, filters, pagination, empty-state, and card behavior remains available. **2026.08.24.22.58:** Empty-state box when no posts (“Check back later for our latest content.”). Headings and footer CTA remain. **2026.08.24.22.30:** Hide on tag / author / all-posts listing views (path fallbacks). Listing template heading is this module’s H1. **2026.08.24.21.39:** First official ship. Cards chrome + blog query loop. Listing formula 18 + Post start 2 → HubSpot **19**. Infinite scroll website/landing only (cap 200). Showcase Middle Card default off. No 5-up. SW Blog Cards deprecated. Documentation link → `/faqs`.