HubSpot ships a default blog listing module. It shows posts in a vertical stack with a title, image, and summary. That is it. There is no carousel option, no grid with pagination, no way to filter by tag, no reading time display, and no control over card layout beyond what the theme allows. If you want a blog slider on your homepage or a filtered post grid on a landing page, you are writing custom code or settling for something that looks like it was built in 2018.
Blog Carousel Pro is a single HubSpot module that replaces all of that. It pulls posts dynamically from any blog on your portal, displays them in 3 distinct layouts, and gives you 50+ style fields to control every detail of the card design. It costs $9.99 once. No subscription, no per-portal fees, no code required.
Three Layouts That Actually Work
The module ships with 3 layout modes, each built for a different use case. You pick the one you need from a single dropdown in the module editor.
Carousel mode is the one most people want first. It renders posts as horizontal cards that slide left and right with Swiper.js powering the interaction. You get autoplay with a configurable delay (default is 4 seconds), loop mode, pagination dots, and navigation arrows. The carousel is fully responsive. On desktop it shows 3 cards by default. On tablet, 2. On mobile, 1. You can override each breakpoint independently. Drag and swipe work on touch devices without any additional configuration.
Grid mode lays posts out in a traditional multi-column grid with a Load More button at the bottom. The initial post count and the number loaded per click are both configurable. If you set the initial count to 6 and the load-more increment to 3, clicking the button reveals 3 more posts each time until the pool is exhausted. The button disappears automatically when there are no more posts to show. This is the layout you want for a dedicated blog listing page or a resources section where visitors browse at their own pace.
Featured bento mode takes a different approach. It highlights the first post as a large hero card and arranges the remaining posts in a smaller grid beside it. The result is a magazine-style layout that gives your newest or most important post visual priority without hiding the rest. The bento grid adapts to the number of posts. With 5 posts, you get a 1-large plus 4-small arrangement. With 3 posts, the layout adjusts proportionally so nothing looks empty.
Content That Updates Itself
Every layout in Blog Carousel Pro pulls content dynamically from your HubSpot blog. You select which blog to pull from (useful if your portal has multiple blogs), set the maximum number of posts, and the module handles the rest. When you publish a new post, it appears automatically. When you unpublish one, it disappears. There is nothing to update manually.
Tag filtering narrows the pool. If you only want to show posts tagged "Product Updates" on your changelog page, you select that tag and the module ignores everything else. You can select multiple tags for broader filtering. This means one module can power different curated sections across your site, each pulling from the same blog but showing different subsets of content.
Current post exclusion is a small feature that matters on blog post templates. When you place the module on a blog post layout, it automatically removes the post the visitor is currently reading from the carousel or grid. Without this, your "Related Posts" section would include the article the person is already looking at, which looks like a bug even though it is technically correct. The module detects the current post ID at render time and filters it out before building the card list.
Cards That Show What Matters
Each post card in the module is built from components you can toggle on or off individually. Nothing is hardcoded into the layout. You decide what information appears and what stays hidden.
Reading time calculates automatically based on word count. The module counts the words in the post body and divides by 238 (the average adult reading speed in words per minute). A 1,900-word post shows "8 min read" on the card. You do not enter this number manually. It updates every time the post content changes.
Author photos pull from the blog author profile in HubSpot. If the author has an avatar uploaded, it appears as a circular thumbnail on the card next to the author name. If no avatar exists, the module hides the photo element cleanly instead of showing a broken image or generic placeholder.
Date formatting offers 3 options: full date (March 20, 2026), short date (Mar 20, 2026), and relative date (2 days ago). The relative format is useful for news-style blogs where recency matters. The full format works better for evergreen content where the specific date is more informative than how long ago it was published.
Featured image aspect ratios are configurable per layout. You can set cards to 16:9 for a cinematic look, 4:3 for a more traditional proportion, or 1:1 for square thumbnails. The image crops from center by default, so the focal point stays visible regardless of the ratio you choose.
Tag badges display on each card as small labels showing which tags the post belongs to. You can limit the number of visible tags per card (showing 2 out of 5, for example) to prevent the badge area from overwhelming the card design. Badge colors inherit from your style settings or can be overridden individually.
Style Control Without CSS
The module exposes 50+ fields organized into logical groups: typography, colors, spacing, borders, shadows, and hover effects. Every field maps to a CSS custom property, so changes preview instantly in the HubSpot editor without saving or refreshing.
Typography fields cover the card title, summary text, author name, date, reading time, and tag badges independently. You can set the font family, size, weight, line height, and color for each. If your theme uses Libre Baskerville for headings and Inter for body text, you can match that in the module without touching CSS. The font size fields accept responsive values, so you can set 18px for desktop titles and 15px for mobile in the same field.
Color fields control the card background, text colors, border colors, overlay gradients, and hover state changes. There are separate fields for the card background at rest and on hover, meaning you can create a subtle lift effect (background shift plus shadow increase) purely through the module settings. The overlay gradient field adds a bottom-to-top dark gradient over the featured image, which improves text readability when the title sits on top of the image.
Spacing fields handle the gap between cards, internal card padding, and the margin between the module and surrounding content. All values use pixel inputs with separate controls for desktop and mobile. Border radius fields round the card corners. A value of 0 gives sharp edges. A value of 12 gives the soft rounded look that most modern designs use. Shadow fields accept standard CSS box-shadow syntax, so you can add depth with something like 0 4px 24px rgba(0,0,0,0.08) for a light float effect.
Performance Details
Blog Carousel Pro loads Swiper.js only when the layout is set to carousel mode. If you use grid or bento, the Swiper library (approximately 40KB gzipped) never reaches the browser. This is handled at the HubL template level with a conditional require_js block, not with JavaScript that loads the library and then decides whether to initialize it.
All CSS is scoped to the module instance using a unique wrapper class. The module does not inject global styles that could conflict with your theme. If you place 2 instances of the module on the same page with different style settings, each renders independently with its own scoped variables.
Featured images use native lazy loading via the loading="lazy" attribute. Images below the fold do not load until the visitor scrolls near them. For the carousel, the first 3 visible slides load immediately while off-screen slides defer. This keeps the initial page payload focused on what the visitor sees first. On a page with 12 posts in a carousel, only 3 images load on the initial paint. The remaining 9 load as the visitor swipes through the slides.
The module generates semantic HTML with proper heading hierarchy, alt text passthrough from HubSpot post settings, and ARIA labels on carousel navigation controls. Screen readers can parse the post list as a structured content block rather than a collection of unlabeled divs.
Get Blog Carousel Pro
Blog Carousel Pro costs $9.99 as a one-time purchase on the HubSpot Marketplace. It works with any HubSpot CMS theme, including free themes, and installs in under 2 minutes. There is no ongoing subscription and no per-portal licensing. Buy it once and use it on the portal where you install it.
Pick it up on the HubSpot Marketplace or read the Blog Carousel Pro deep dive on our product page for a full walkthrough of every field and layout option.