Blog Carousel Pro for HubSpot

Dynamic blog post carousel, grid, and featured layouts — three display modes, tag filtering, reading time, full style control. Pulls posts from any HubSpot blog.

Demo 1 — Carousel Mode

Editorial — Serif + Gold

Classic 3-column carousel with Cormorant Garamond headings, gold hover accents, image zoom on hover. CTA link in header. Pagination dots + arrows.

Demo 2 — Carousel Dark + Autoplay

Dark Magazine — 2 Columns

Wide 2-column carousel on dark background. Autoplay at 4s intervals. No border, large shadow, darken image effect. Reading time enabled, long date format.

Demo 3 — Grid Mode + Load More

Clean Grid — Load More Button

3-column CSS grid showing 3 posts initially with a "Load More" button. Square image ratio, medium shadow, brighten hover. Author photos, numeric dates.

Demo 4 — Grid Mode, 4 Columns

Law Firm — Navy & Gold

4-column tight grid on dark navy. Libre Baskerville headings, gold tags, no excerpt, no author photo. Compact cards with visible borders.

Demo 5 — Featured + Thumbnails

Editorial — Featured Layout

Large featured post on the left with a thumbnail sidebar on the right. Serif headings, warm ivory background. Excerpts on featured card, reading time enabled.

Demo 6 — Featured Dark Minimal

Minimal — Dark + No Frills

Featured layout on dark background. No tags, no excerpts, no author photos — just images, titles, authors, and dates. Square image ratio, tight spacing.

Demo 7 — Carousel, 4 Columns

Wealth Management — Teal & Bronze

Compact 4-column carousel with Libre Baskerville headings. Teal-navy background, bronze accents. No excerpts — just images, titles, and meta. Autoplay enabled.

Demo 8 — Grid, No Images

Text-Only — Minimal Cards

2-column grid with no featured images. Tags shown inline above the title. Author with photo, long date format, reading time. Clean off-white background.

Setup & Configuration

Blog Carousel Pro pulls posts dynamically from any HubSpot blog. Select a blog, configure the display, and drop it onto any page — website pages, landing pages, or blog templates.

Selecting a Blog

In the module editor, open Blog Source and pick the blog you want to pull from. Set the number of posts (2-20). Optionally filter by a specific tag — enter the exact tag name (case-insensitive). Enable "Exclude Current Post" when placing the module on blog post templates.

Display Modes

Three layout modes, each fully responsive:

  • Carousel — Swiper-powered horizontal slider. Choose 2, 3, or 4 columns. Optional autoplay with configurable speed (2-10 seconds). Navigation arrows + pagination dots. Loop enabled when posts exceed column count.
  • Grid — CSS Grid with 2, 3, or 4 columns. Optional "Load More" button that reveals hidden posts (set how many show initially). Collapses to 2 columns on tablet, 1 on mobile.
  • Featured + Thumbnails (Bento) — Equal-width two-column bento grid. Left column: large featured card with expanded title and full image. Right column: stacked thumbnail cards (horizontal layout with small image + title, vertically centered). Both columns match height automatically. Stacks to single column on tablet.

Card Settings

Toggle each card element independently:

  • Featured Image — show/hide. Choose aspect ratio: 16:9, 4:3, 3:2, square, or auto (original). When hidden, tag badges display inline above the title.
  • Tag Badge — shows the first topic/tag. Overlays on image (when images are on) or inline (when images are off).
  • Excerpt — truncated post summary. Configurable length (50-300 characters).
  • Author — name + optional avatar photo.
  • Date — four format options: short (Jan 5, 2026), long (January 5, 2026), relative (2 days ago), numeric (01/05/2026).
  • Reading Time — estimated minutes based on word count (200 wpm).

Style System

Every visual property is configurable — no hardcoded values. Two independent Google Font pickers control heading and body typography across the entire module.

Colors (19 fields)

  • Section — background color with opacity (set to 0 for transparent)
  • Card — background, border color with opacity (0 = no border)
  • Typography — post title, excerpt, meta (date/author), heading, subheading — each independently
  • Tag Badges — background + text color
  • Navigation — arrows (default + hover), dots (default + active), CTA link (default + hover)
  • Load More Button — background, text, and border colors

Typography (9 fields)

  • Heading Font — Google Font picker with theme inheritance
  • Body Font — Google Font picker with theme inheritance
  • Sizes — section heading, subheading, post title, excerpt, meta, tag badge (all in px)
  • Title Line Height — fine-tune title spacing

Card Style (7 fields)

  • Border Radius — card + image radius (separate controls)
  • Shadow — none, small, medium, large — for default and hover states
  • Hover Effect — image zoom, brighten, darken, or none
  • Content Padding — space inside card body

Navigation (4 fields)

  • Arrow Size — button diameter in px
  • Dot Size + Gap — pagination bullet dimensions
  • Margin Top — space between cards and navigation row

Spacing & Container (5 fields)

  • Max Width — container max-width (set to 0 for full width)
  • Horizontal Padding — left/right gutter
  • Section Padding — top and bottom independently
  • Heading Margin Bottom — space between header and cards

Responsive (2 fields)

  • Tablet Breakpoint — default 768px. Grid collapses to 2 cols, carousel to 2 slides.
  • Mobile Breakpoint — default 480px. Everything collapses to single column/slide.

Technical Details

  • External dependency — Swiper 11 (loaded from CDN only when carousel mode is active and more than 1 post)
  • Instance isolation — all CSS scoped with bcp-docs, multiple modules per page with zero conflicts
  • Accessible — semantic HTML (article, time, nav), aria-labels on buttons, lazy loading images
  • Any template — website pages, landing pages, blog listings, blog posts
  • Theme-agnostic — works standalone or inherits theme fonts/colors when available
  • Grid load-more — vanilla JS, no extra dependencies
  • Carousel retry — automatically retries Swiper init if the library hasn't loaded yet
Blog Carousel Pro by Studio Nope