Skip to content

Blog Section

A responsive grid of automatically pulled blog posts - recent, popular, or by tag - drawn in one of three layouts: simple cards, image overlay, or horizontal. Best for: blog index sections, "latest articles" / "from the blog" blocks on landing pages, site pages, and blog templates.

📷 Hero image

Target file: assets/img/blog-section/hero.webp

An automatically pulled blog feed drawn as a three-column card grid on a Light background. Each simple card shows a featured image on top, tag chips, a bold Dark title, a meta row with date and read time, a short excerpt, and the author with a read-more link. Show a full row of three cards at desktop width. Captured at desktop width.

At a glance

Blog Feed Cards Grid

  • What it does: fetches posts from a chosen blog (recent, popular, or by tag) and renders them in a responsive column grid. Each post shows a featured image with hover zoom, tags (inline or overlaid), title, meta row (date + read time), excerpt, author, and a read-more link. The whole card can be clickable.
  • Best used for: dropping a live blog feed anywhere on a landing page or site page without hand-entering posts.
  • Not the right fit if: you want a curated feed with a built-in section header and five card designs (use Blog Post - Recent Post), or the full post loop on a blog index (use Blog Listing).
  • 🔗 Live demo: (add demo link)

Add it to your page

  1. In the HubSpot page editor, click Add and search for Blog Section.
  2. Drop it where you want the feed to appear.
  3. Under Click to update content, choose a Blog and a Blog type (recent / popular / recent tag posts).
  4. Pick a Blog Layout (simple / overlay / horizontal) and set No. of blogpost.
  5. Toggle the post elements you want: featured image, tags, author, publish date, description, read time.
  6. Set your grid Columns and style the card in the Style tab.

Design recipes

Each recipe is a look plus the exact fields to reproduce it.

Image stacked above the post content, 3-up on desktop.

📷 Result

Target file: recipe-simple-cards-default.webp

Three cards in a row, each with the featured image stacked above the tags, title, meta row, excerpt, and author, pulled from recent posts on a Light background.

Field Set to
Content › Blog Layout simple
Content › Blog type recent_blogpost
Layout › Columns › Large / Medium / Small 3 / 2 / 1

Content sitting over a full-bleed background image.

📷 Result

Target file: recipe-overlay-feed.webp

Cards where the post content sits over a full-bleed featured image with a mid-strength overlay, and the title and excerpt in Light text pinned to the bottom.

Field Set to
Content › Blog Layout overlay
Blog featured image › Image overlay style bg-overlay-2
Card › Alignment › Vertical content position bottom

The most-popular posts within a time window.

📷 Result

Target file: recipe-popular-posts.webp

A three-card feed showing the most-popular all-time posts, each simple card with featured image, title, meta, and excerpt on a Light background.

Field Set to
Content › Blog type popular_blogpost
Content › Popular from popular_all_time
Content › No. of blogpost 3

Semi-transparent cards with a frosted backdrop.

📷 Result

Target file: recipe-glass-cards.webp

Cards with a semi-transparent custom-color background and a frosted backdrop blur, so the section background shows softly through each card. Best shown over an image or gradient background.

Field Set to
Card › Make a card on
Card › Background › Background custom_color (semi-transparent)
Card › Background › Add backdrop blur on

"I want to..." quick reference

Goal Setting
Show most recent posts Content › Blog type = recent_blogpost
Show most popular posts Content › Blog type = popular_blogpost + Popular from window
Show posts from specific tags Content › Blog type = recent_tag_posts + add Tags
Image stacked above text Content › Blog Layout = simple
Content over a background image Content › Blog Layout = overlay
Image beside the text Content › Blog Layout = horizontal
Show the author with photo Content › Author + Show author avatar
Tag badge on the image Content › Tag on + Tag position = overlay (simple layout)
Hide the read-more link Default labels › Read more button = empty
Make only the title clickable Content › Whole card clickable off
3-up / 2-up / 1-up columns Layout › Columns = 3 / 2 / 1
Featured image zoom on hover Blog featured image › Scaling on hover
Control excerpt length Blog description › Truncate a text after

Field reference

The editor is organized into a Content tab and a Style tab. Groups below match the HubSpot editor. (258 fields total - expand each group as needed.)

Content tab

Section background settings
Field Type Options Default
Type choice none / color / gradient / image / video none
Upload background image image - -
Video file - -
Click to update content
Field Type Default
Choose a blog blog -
Blog type choice (recent / popular / recent tag posts) popular_blogpost
Blog Layout choice (simple / overlay / horizontal) simple
No. of blogpost number 6
Tag position choice (inline / overlay) inline
Date format choice (version 1 to 6) version_1
Popular from choice (all time / year / 6 months / month) popular_all_time
Whole card clickable boolean on

Element toggles: featured image (on), tag, author, author avatar, publish date, title (on), blog description (on), read time. Default labels: read more button, author prefix, read time label, meta separator.

Style tab

Color scheme
Field Options Default
Color scheme light / dark light

Drives the section's surface and text tokens. Set the background Type to none (shown as "Default (scheme)") to let the scheme supply the background colour.

Section background settings

Background color (token, default bg-white), gradient (bg-gradient-1 to 3), image / video overlay style and position, blur, parallax (scale + speed), and two radial glows (color token or custom, position, size, opacity).

Section divider settings

Divider type: none / shape / border / shadow.

  • Border divider: from top / bottom / both, width, color (default Tertiary token).
  • Shadow divider: regular / light / dark / custom shadow with x / y / blur / spread / color.
  • Shape divider: 25 shapes, top / bottom / both, flip / invert, color or gradient, responsive heights.
Section spacing settings
Field Options Default
Top top-y-0 to top-4xl top-l
Bottom bottom-y-0 to bottom-4xl bottom-l
Left left-x-0 / left-m / left-l / left-xl left-m
Right right-x-0 / right-m / right-l / right-xl right-m

Top and Bottom also accept custom, which reveals Custom top / Custom bottom number fields for desktop, tablet, and mobile (defaults 80 / 60 / 40).

Layout settings
  • Columns: large / medium / small (default 3 / 2 / 1) plus a gap per breakpoint.
  • Section wrapper container: default / full-width / custom per breakpoint + block alignment.
  • Inner content container: independent inner width + alignment.
Card
  • Alignment: content alignment (left / right / center) and vertical content position for the overlay layout.
  • Make a card: off by default. Background (color / gradient / custom) with optional backdrop blur, border, responsive padding, shadow, round corner (default round-s).
  • Horizontal layout settings: image width percent, image-to-content gap (gap-0 to gap-4xl), collapse breakpoint, vertical alignment.
Preset Settings - image, title, description, meta
Field Type Default
Blog featured image › Image ratio choice (9 ratios / custom height) aspect-16by9
Blog featured image › Scaling on hover number 1.04
Blog Title › Show blog title as h1 to h6 h5
Blog description › Truncate a text after number 100
Meta row › Spacing under meta row sb-0 to sb-4xl sb-m

Publish date, read time, and author each carry font size, transform, color (token), and spacing under element. The meta row controls gaps between tag, date, and read time.

Preset Settings - Blog tag & Link
  • Blog tag: max tags, background (color / gradient), text color, font size, bold, letter spacing, transform, round corner, padding, gap, backdrop blur, overlay offsets.
  • Link: font style, text color, heading level, optional icon with size and gap (gap-0 to gap-4xl), underline, bold, spacing under element.
Developer use only

Add custom CSS here: per-module CSS injection field.

Tips & gotchas

Horizontal works best narrow

The horizontal layout places the image beside the text, so it reads best at 1 to 2 Columns. It collapses to vertical below the Collapse to vertical at breakpoint.

Popular window only affects Popular

Popular from (all time / year / six months / month) only applies when Blog type is set to popular_blogpost. For recent or tag feeds it has no effect.

Curated header lives elsewhere

Blog Section has no built-in title block. If you want a subtitle pill, highlightable title, and description above the feed, use Blog Post - Recent Post or add a Section Title module above.