---
title: Blog Carousel Pro — Dynamic Blog Posts for HubSpot
description: Premium blog carousel module for HubSpot — three display modes (carousel, grid, featured + thumbnails), full style control, responsive. Zero dependencies beyond Swiper.
---

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

---

## Latest Articles

Insights on design, development, and the HubSpot ecosystem

 View All Posts

### [![](https://www.nopethemes.com/hubfs/getty-images-CDllHdcQdjA-unsplash.jpg) studio nope theme Blog Layout and Styling in the Studio Nope Theme A theme demo without a clear blog layout is incomplete. The Studio Nope theme includes a simple blog listing and post la... ![Studio Nope](https://www.nopethemes.com/hubfs/studio-nope-logo-round-2.png) Studio Nope Feb 2, 2026](https://www.nopethemes.com/blog/blog-layout-and-styling-in-the-studio-nope-theme?hsLang=en)

### [![](https://www.nopethemes.com/hubfs/getty-images-8fn7chDt6n0-unsplash.jpg) hubspot cms Designing Studio Nope Theme Modules Marketers Can Use Safely Most people who touch your theme will not be developers. The Studio Nope theme modules are designed so a marketer can dr... ![Studio Nope](https://www.nopethemes.com/hubfs/studio-nope-logo-round-2.png) Studio Nope Feb 2, 2026](https://www.nopethemes.com/blog/designing-studio-nope-theme-modules-marketers-can-use-safely?hsLang=en)

### [![](https://www.nopethemes.com/hubfs/getty-images-6y6DGYcuQNo-unsplash.jpg) studio nope theme Keeping CSS in the Studio Nope Theme Under Control A theme can look clean in Figma and still feel heavy in a browser if the CSS is scattered. The Studio Nope theme is buil... ![Studio Nope](https://www.nopethemes.com/hubfs/studio-nope-logo-round-2.png) Studio Nope Feb 2, 2026](https://www.nopethemes.com/blog/keeping-css-in-the-studio-nope-theme-under-control?hsLang=en)

### [![A Simple Layout System for the Studio Nope Theme](https://www.nopethemes.com/hubfs/getty-images-6H_A3XUnmlg-unsplash%20(1).jpg) studio nope theme A Simple Layout System for the Studio Nope Theme A theme demo means nothing if the layout system is confusing. The Studio Nope theme is built around a small set of layou... ![Studio Nope](https://www.nopethemes.com/hubfs/studio-nope-logo-round-2.png) Studio Nope Feb 2, 2026](https://www.nopethemes.com/blog/a-simple-layout-system-for-the-studio-nope-theme?hsLang=en)

### [![How to Set Up Theme Settings in the Studio Nope Theme](https://www.nopethemes.com/hubfs/getty-images-_4eCXzsktOc-unsplash.jpg) studio nope theme How to Set Up Theme Settings in the Studio Nope Theme The fastest way to make the Studio Nope theme feel like your brand is to set up theme settings before anyone builds page... ![Studio Nope](https://www.nopethemes.com/hubfs/studio-nope-logo-round-2.png) Studio Nope Feb 2, 2026](https://www.nopethemes.com/blog/how-to-set-up-theme-settings-in-the-studio-nope-theme?hsLang=en)

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.

---

## From the Journal

### [![](https://www.nopethemes.com/hubfs/getty-images-CDllHdcQdjA-unsplash.jpg) studio nope theme Blog Layout and Styling in the Studio Nope Theme A theme demo without a clear blog layout is incomplete. The Studio Nope theme includes a simple blog listing and post layout that keeps articles readable and ea... Studio Nope February 2, 2026 2 min read](https://www.nopethemes.com/blog/blog-layout-and-styling-in-the-studio-nope-theme?hsLang=en)

### [![](https://www.nopethemes.com/hubfs/getty-images-8fn7chDt6n0-unsplash.jpg) hubspot cms Designing Studio Nope Theme Modules Marketers Can Use Safely Most people who touch your theme will not be developers. The Studio Nope theme modules are designed so a marketer can drop them on a page, fill a few fields, an... Studio Nope February 2, 2026 2 min read](https://www.nopethemes.com/blog/designing-studio-nope-theme-modules-marketers-can-use-safely?hsLang=en)

### [![](https://www.nopethemes.com/hubfs/getty-images-6y6DGYcuQNo-unsplash.jpg) studio nope theme Keeping CSS in the Studio Nope Theme Under Control A theme can look clean in Figma and still feel heavy in a browser if the CSS is scattered. The Studio Nope theme is built to keep styles simple and predictable ... Studio Nope February 2, 2026 2 min read](https://www.nopethemes.com/blog/keeping-css-in-the-studio-nope-theme-under-control?hsLang=en)

### [![A Simple Layout System for the Studio Nope Theme](https://www.nopethemes.com/hubfs/getty-images-6H_A3XUnmlg-unsplash%20(1).jpg) studio nope theme A Simple Layout System for the Studio Nope Theme A theme demo means nothing if the layout system is confusing. The Studio Nope theme is built around a small set of layouts that you can reuse across the site wi... Studio Nope February 2, 2026 2 min read](https://www.nopethemes.com/blog/a-simple-layout-system-for-the-studio-nope-theme?hsLang=en)

### [![How to Set Up Theme Settings in the Studio Nope Theme](https://www.nopethemes.com/hubfs/getty-images-_4eCXzsktOc-unsplash.jpg) studio nope theme How to Set Up Theme Settings in the Studio Nope Theme The fastest way to make the Studio Nope theme feel like your brand is to set up theme settings before anyone builds pages. Once these basics are in place, every... Studio Nope February 2, 2026 3 min read](https://www.nopethemes.com/blog/how-to-set-up-theme-settings-in-the-studio-nope-theme?hsLang=en)

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.

---

## Resources & Guides

Everything you need to get started

### [![](https://www.nopethemes.com/hubfs/getty-images-CDllHdcQdjA-unsplash.jpg) studio nope theme Blog Layout and Styling in the Studio Nope Theme A theme demo without a clear blog layout is incomplete. The Studio Nope theme includes a simple blog... ![Studio Nope](https://www.nopethemes.com/hubfs/studio-nope-logo-round-2.png) Studio Nope 02/02/2026 2 min read](https://www.nopethemes.com/blog/blog-layout-and-styling-in-the-studio-nope-theme?hsLang=en)

### [![](https://www.nopethemes.com/hubfs/getty-images-8fn7chDt6n0-unsplash.jpg) hubspot cms Designing Studio Nope Theme Modules Marketers Can Use Safely Most people who touch your theme will not be developers. The Studio Nope theme modules are designed ... ![Studio Nope](https://www.nopethemes.com/hubfs/studio-nope-logo-round-2.png) Studio Nope 02/02/2026 2 min read](https://www.nopethemes.com/blog/designing-studio-nope-theme-modules-marketers-can-use-safely?hsLang=en)

### [![](https://www.nopethemes.com/hubfs/getty-images-6y6DGYcuQNo-unsplash.jpg) studio nope theme Keeping CSS in the Studio Nope Theme Under Control A theme can look clean in Figma and still feel heavy in a browser if the CSS is scattered. The Studi... ![Studio Nope](https://www.nopethemes.com/hubfs/studio-nope-logo-round-2.png) Studio Nope 02/02/2026 2 min read](https://www.nopethemes.com/blog/keeping-css-in-the-studio-nope-theme-under-control?hsLang=en)

### [![A Simple Layout System for the Studio Nope Theme](https://www.nopethemes.com/hubfs/getty-images-6H_A3XUnmlg-unsplash%20(1).jpg) studio nope theme A Simple Layout System for the Studio Nope Theme A theme demo means nothing if the layout system is confusing. The Studio Nope theme is built around ... ![Studio Nope](https://www.nopethemes.com/hubfs/studio-nope-logo-round-2.png) Studio Nope 02/02/2026 2 min read](https://www.nopethemes.com/blog/a-simple-layout-system-for-the-studio-nope-theme?hsLang=en)

### [![How to Set Up Theme Settings in the Studio Nope Theme](https://www.nopethemes.com/hubfs/getty-images-_4eCXzsktOc-unsplash.jpg) studio nope theme How to Set Up Theme Settings in the Studio Nope Theme The fastest way to make the Studio Nope theme feel like your brand is to set up theme settings befor... ![Studio Nope](https://www.nopethemes.com/hubfs/studio-nope-logo-round-2.png) Studio Nope 02/02/2026 3 min read](https://www.nopethemes.com/blog/how-to-set-up-theme-settings-in-the-studio-nope-theme?hsLang=en)

Load More

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.

---

## Legal Insights

Updates from our practice areas

 All Articles

### [![](https://www.nopethemes.com/hubfs/getty-images-CDllHdcQdjA-unsplash.jpg) studio nope theme Blog Layout and Styling in the Studio Nope Theme Studio Nope Feb 2, 2026](https://www.nopethemes.com/blog/blog-layout-and-styling-in-the-studio-nope-theme?hsLang=en)

### [![](https://www.nopethemes.com/hubfs/getty-images-8fn7chDt6n0-unsplash.jpg) hubspot cms Designing Studio Nope Theme Modules Marketers Can Use Safely Studio Nope Feb 2, 2026](https://www.nopethemes.com/blog/designing-studio-nope-theme-modules-marketers-can-use-safely?hsLang=en)

### [![](https://www.nopethemes.com/hubfs/getty-images-6y6DGYcuQNo-unsplash.jpg) studio nope theme Keeping CSS in the Studio Nope Theme Under Control Studio Nope Feb 2, 2026](https://www.nopethemes.com/blog/keeping-css-in-the-studio-nope-theme-under-control?hsLang=en)

### [![A Simple Layout System for the Studio Nope Theme](https://www.nopethemes.com/hubfs/getty-images-6H_A3XUnmlg-unsplash%20(1).jpg) studio nope theme A Simple Layout System for the Studio Nope Theme Studio Nope Feb 2, 2026](https://www.nopethemes.com/blog/a-simple-layout-system-for-the-studio-nope-theme?hsLang=en)

### [![How to Set Up Theme Settings in the Studio Nope Theme](https://www.nopethemes.com/hubfs/getty-images-_4eCXzsktOc-unsplash.jpg) studio nope theme How to Set Up Theme Settings in the Studio Nope Theme Studio Nope Feb 2, 2026](https://www.nopethemes.com/blog/how-to-set-up-theme-settings-in-the-studio-nope-theme?hsLang=en)

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.

---

## Editor's Picks

 Browse All

### [![](https://www.nopethemes.com/hubfs/getty-images-CDllHdcQdjA-unsplash.jpg) studio nope theme Blog Layout and Styling in the Studio Nope Theme A theme demo without a clear blog layout is incomplete. The Studio Nope theme includes a simple blog listing and post layout that keeps articles reada... ![Studio Nope](https://www.nopethemes.com/hubfs/studio-nope-logo-round-2.png) Studio Nope February 2, 2026 2 min read](https://www.nopethemes.com/blog/blog-layout-and-styling-in-the-studio-nope-theme?hsLang=en)

### [![](https://www.nopethemes.com/hubfs/getty-images-8fn7chDt6n0-unsplash.jpg) hubspot cms Designing Studio Nope Theme Modules Marketers Can Use Safely Most people who touch your theme will not be developers. The Studio Nope theme modules are designed so a marketer can drop them on a page, fill a few ... ![Studio Nope](https://www.nopethemes.com/hubfs/studio-nope-logo-round-2.png) Studio Nope February 2, 2026 2 min read](https://www.nopethemes.com/blog/designing-studio-nope-theme-modules-marketers-can-use-safely?hsLang=en)

### [![](https://www.nopethemes.com/hubfs/getty-images-6y6DGYcuQNo-unsplash.jpg) studio nope theme Keeping CSS in the Studio Nope Theme Under Control A theme can look clean in Figma and still feel heavy in a browser if the CSS is scattered. The Studio Nope theme is built to keep styles simple and pr... ![Studio Nope](https://www.nopethemes.com/hubfs/studio-nope-logo-round-2.png) Studio Nope February 2, 2026 2 min read](https://www.nopethemes.com/blog/keeping-css-in-the-studio-nope-theme-under-control?hsLang=en)

### [![A Simple Layout System for the Studio Nope Theme](https://www.nopethemes.com/hubfs/getty-images-6H_A3XUnmlg-unsplash%20(1).jpg) studio nope theme A Simple Layout System for the Studio Nope Theme A theme demo means nothing if the layout system is confusing. The Studio Nope theme is built around a small set of layouts that you can reuse across t... ![Studio Nope](https://www.nopethemes.com/hubfs/studio-nope-logo-round-2.png) Studio Nope February 2, 2026 2 min read](https://www.nopethemes.com/blog/a-simple-layout-system-for-the-studio-nope-theme?hsLang=en)

### [![How to Set Up Theme Settings in the Studio Nope Theme](https://www.nopethemes.com/hubfs/getty-images-_4eCXzsktOc-unsplash.jpg) studio nope theme How to Set Up Theme Settings in the Studio Nope Theme The fastest way to make the Studio Nope theme feel like your brand is to set up theme settings before anyone builds pages. Once these basics are in pl... ![Studio Nope](https://www.nopethemes.com/hubfs/studio-nope-logo-round-2.png) Studio Nope February 2, 2026 3 min read](https://www.nopethemes.com/blog/how-to-set-up-theme-settings-in-the-studio-nope-theme?hsLang=en)

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.

---

## Recent Stories

### [![](https://www.nopethemes.com/hubfs/getty-images-CDllHdcQdjA-unsplash.jpg) Blog Layout and Styling in the Studio Nope Theme Studio Nope Feb 2, 2026](https://www.nopethemes.com/blog/blog-layout-and-styling-in-the-studio-nope-theme?hsLang=en)

### [![](https://www.nopethemes.com/hubfs/getty-images-8fn7chDt6n0-unsplash.jpg) Designing Studio Nope Theme Modules Marketers Can Use Safely Studio Nope Feb 2, 2026](https://www.nopethemes.com/blog/designing-studio-nope-theme-modules-marketers-can-use-safely?hsLang=en)

### [![](https://www.nopethemes.com/hubfs/getty-images-6y6DGYcuQNo-unsplash.jpg) Keeping CSS in the Studio Nope Theme Under Control Studio Nope Feb 2, 2026](https://www.nopethemes.com/blog/keeping-css-in-the-studio-nope-theme-under-control?hsLang=en)

### [![A Simple Layout System for the Studio Nope Theme](https://www.nopethemes.com/hubfs/getty-images-6H_A3XUnmlg-unsplash%20(1).jpg) A Simple Layout System for the Studio Nope Theme Studio Nope Feb 2, 2026](https://www.nopethemes.com/blog/a-simple-layout-system-for-the-studio-nope-theme?hsLang=en)

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.

---

## Market Commentary

Perspectives from our investment team

 View All Insights

### [![](https://www.nopethemes.com/hubfs/getty-images-CDllHdcQdjA-unsplash.jpg) studio nope theme Blog Layout and Styling in the Studio Nope Theme Feb 2, 2026 2 min read](https://www.nopethemes.com/blog/blog-layout-and-styling-in-the-studio-nope-theme?hsLang=en)

### [![](https://www.nopethemes.com/hubfs/getty-images-8fn7chDt6n0-unsplash.jpg) hubspot cms Designing Studio Nope Theme Modules Marketers Can Use Safely Feb 2, 2026 2 min read](https://www.nopethemes.com/blog/designing-studio-nope-theme-modules-marketers-can-use-safely?hsLang=en)

### [![](https://www.nopethemes.com/hubfs/getty-images-6y6DGYcuQNo-unsplash.jpg) studio nope theme Keeping CSS in the Studio Nope Theme Under Control Feb 2, 2026 2 min read](https://www.nopethemes.com/blog/keeping-css-in-the-studio-nope-theme-under-control?hsLang=en)

### [![A Simple Layout System for the Studio Nope Theme](https://www.nopethemes.com/hubfs/getty-images-6H_A3XUnmlg-unsplash%20(1).jpg) studio nope theme A Simple Layout System for the Studio Nope Theme Feb 2, 2026 2 min read](https://www.nopethemes.com/blog/a-simple-layout-system-for-the-studio-nope-theme?hsLang=en)

### [![How to Set Up Theme Settings in the Studio Nope Theme](https://www.nopethemes.com/hubfs/getty-images-_4eCXzsktOc-unsplash.jpg) studio nope theme How to Set Up Theme Settings in the Studio Nope Theme Feb 2, 2026 3 min read](https://www.nopethemes.com/blog/how-to-set-up-theme-settings-in-the-studio-nope-theme?hsLang=en)

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.

---

## All Posts

### [studio nope theme Blog Layout and Styling in the Studio Nope Theme A theme demo without a clear blog layout is incomplete. The Studio Nope theme includes a simple blog listing and post layout that keeps articles readable and easy to scan. ![Studio Nope](https://www.nopethemes.com/hubfs/studio-nope-logo-round-2.png) Studio Nope February 2, 2026 2 min read](https://www.nopethemes.com/blog/blog-layout-and-styling-in-the-studio-nope-theme?hsLang=en)

### [hubspot cms Designing Studio Nope Theme Modules Marketers Can Use Safely Most people who touch your theme will not be developers. The Studio Nope theme modules are designed so a marketer can drop them on a page, fill a few fields, and get a clean result... ![Studio Nope](https://www.nopethemes.com/hubfs/studio-nope-logo-round-2.png) Studio Nope February 2, 2026 2 min read](https://www.nopethemes.com/blog/designing-studio-nope-theme-modules-marketers-can-use-safely?hsLang=en)

### [studio nope theme Keeping CSS in the Studio Nope Theme Under Control A theme can look clean in Figma and still feel heavy in a browser if the CSS is scattered. The Studio Nope theme is built to keep styles simple and predictable so you can ship new ... ![Studio Nope](https://www.nopethemes.com/hubfs/studio-nope-logo-round-2.png) Studio Nope February 2, 2026 2 min read](https://www.nopethemes.com/blog/keeping-css-in-the-studio-nope-theme-under-control?hsLang=en)

### [studio nope theme A Simple Layout System for the Studio Nope Theme A theme demo means nothing if the layout system is confusing. The Studio Nope theme is built around a small set of layouts that you can reuse across the site without guessing. ![Studio Nope](https://www.nopethemes.com/hubfs/studio-nope-logo-round-2.png) Studio Nope February 2, 2026 2 min read](https://www.nopethemes.com/blog/a-simple-layout-system-for-the-studio-nope-theme?hsLang=en)

### [studio nope theme How to Set Up Theme Settings in the Studio Nope Theme The fastest way to make the Studio Nope theme feel like your brand is to set up theme settings before anyone builds pages. Once these basics are in place, every new page starts clo... ![Studio Nope](https://www.nopethemes.com/hubfs/studio-nope-logo-round-2.png) Studio Nope February 2, 2026 3 min read](https://www.nopethemes.com/blog/how-to-set-up-theme-settings-in-the-studio-nope-theme?hsLang=en)

---

## 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