Studio Nope - Blog Carousel

A premium blog module that pulls posts dynamically from any HubSpot blog into three responsive layouts: carousel, grid, or featured bento. Everything is managed from the visual editor.

Blog Carousel Pro gives you a Swiper-powered slider with autoplay and pagination, a CSS grid with optional Load More button, and a featured bento layout where a large hero card sits beside evenly stacked thumbnails. Pick a blog, set the post count, filter by tag, and style everything from the Style tab.

Every element is fully customizable. Section backgrounds can be solid or transparent for full-width color bands. Card backgrounds, borders, shadows with four intensity levels, and image hover effects (zoom, brighten, darken) are all configurable. Typography uses two Google Font pickers. Tag badge colors, navigation arrows and dots, CTA links, and Load More button styling each have their own controls. 50+ style fields in total.

What you can build:

• Editorial carousels with serif headings, gold accents, and image zoom on hover

• Dark magazine sliders with autoplay and reading time badges

• Clean resource grids with Load More pagination and colored tag badges

• Compact 4-column insight grids on dark navy or teal backgrounds

• Featured article layouts with a large hero card and thumbnail sidebar

• Minimal text-only post lists with inline tags and long excerpts

• Full-width dark sections with centered content containers for landing pages

Content features include pulling 2 to 20 posts from any blog with tag filtering (case-insensitive) and current post exclusion for blog templates. Cards support featured images at five aspect ratios (16:9, 4:3, 3:2, square, auto), tag badges that overlay on images or display inline, configurable excerpts (50 to 300 chars), author name with optional photo, four date formats (short, long, relative, numeric), and estimated reading time. Every card element toggles independently.

Carousel mode offers 2 to 4 columns with optional autoplay (2 to 10 seconds), loop, arrows, and dots. Grid mode offers 2 to 4 columns with optional Load More where you set the initial count. Featured mode uses an equal-height bento grid with a large card on the left and a thumbnail strip on the right. Separate tablet and mobile breakpoints let you control the esponsive behavior. Full-width section backgrounds with centered content containers work through independent max-width and padding controls.

The Style tab includes 50+ fields organized into clear groups. Section background with opacity. Container max-width and padding. 19 color fields covering cards, text, tags, arrows, dots, CTA, and Load More. Two Google Font pickers with theme inheritance. Font sizes for heading, title, excerpt, meta, and tags. Card border radius, image radius, shadow, hover shadow, hover effect, content padding, and border. Arrow size, dot size, dot gap, and navigation margin. Section padding top and bottom with heading spacing. Tablet and mobile breakpoints.

Hover transitions are GPU-composited for smooth performance. Swiper loads from CDN only when carousel mode is active. All CSS is scoped per instance so multiple modules work on the same page with zero conflicts. Semantic HTML, ARIA labels, and lazy loading are built in. Works on any HubSpot template with no theme required.