Skip to content

Blog Post - Recent Post

A responsive grid of automatically pulled blog posts - recent, popular, or by tag - with an optional section header and five card designs. Best for: "recent posts" / "from the blog" / "related reading" sections on landing pages, site pages, blog listings, and blog posts.

📷 Hero image

Target file: assets/img/blog-recent-post/hero.webp

A curated recent-posts block with a centered section header on top: a small subtitle pill, a bold Dark title with one word highlighted in the Secondary color, and a short description. Below it, three posts in the overlay-image design, each with the title in Light text over a darkened featured image. Captured at desktop width.

At a glance

Blog Recent posts Section header Cards

  • What it does: fetches posts from a chosen blog (recent, popular, or by tag) and renders them in a responsive grid, with an optional section header (subtitle pill, highlightable title, description) sitting above. Each post is drawn in one of five designs: title only, title with link, full card, image overlay, or horizontal.
  • Best used for: a "related reading" or "from the blog" block that needs its own heading, or a curated recent-posts strip on any page.
  • Not the right fit if: you want a headerless feed (use Blog Section) 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 Post - Recent Post.
  2. Drop it where the recent-posts block belongs.
  3. Under Click to update content, turn on Section title and fill in the subtitle, title, and description.
  4. Choose a Blog and a Blog type (recent / popular / recent tag posts), then set No. of blog you want to fetch.
  5. Pick a Blog design type (title only / title with link / card / overlay image / horizontal).
  6. Toggle the post elements and style each one in the Style tab.

Design recipes

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

Text over a darkened featured image.

📷 Result

Target file: recipe-image-overlay-default.webp

Three posts where the title and meta sit in Light text over a darkened featured image, content pinned to the bottom of each card.

Field Set to
Content › Blog design type overlay_image
Overlay image › Overlay color bg-overlay-2
Card › Alignment › Vertical content position bottom

Featured image on top, then title, meta, excerpt, author.

📷 Result

Target file: recipe-full-card.webp

Cards with the featured image on top carrying a light shadow, then a bold Dark title, meta row, excerpt, and author, wrapped as distinct cards on a Light background.

Field Set to
Content › Blog design type card
Card › Make a card on
Featured image › Shadow light-shadow

A minimal list of titles, each with a read-more link and arrow.

📷 Result

Target file: recipe-title-with-link.webp

A minimal, image-free list of post titles, each followed by a Read More link with a small arrow icon, on a Light background.

Field Set to
Content › Blog design type title_link
Content › Link label Read More
Link › Add icon on

A section heading with one word emphasized.

📷 Result

Target file: recipe-highlighted-header.webp

A close-up of the centered section header with one word in the bold Dark title carrying an underline highlight, above the post grid.

Field Set to
Content › Section title on
Section title › Title › Highlight style line_under_word
Section title › Alignment center

"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
Text over the image Content › Blog design type = overlay_image
Image beside the text Content › Blog design type = horizontal
Add a section heading Content › Section title on + subtitle / title / description
Highlight a word in the title Section title › Title › Highlight style (wrap the word in span tags)
Show the author with photo Content › Show author + Show author avatar
Tag badge on the image Content › Tag on + Tag position = overlay
Make only the title clickable Content › Whole card clickable off
Card with shadow Card › Make a card + Shadow
3-up / 2-up / 1-up columns Layout › Columns = 3 / 2 / 1
Control excerpt length Description › Number of character you want to fetch...

Field reference

The editor is organized into a Content tab and a Style tab. Groups below match the HubSpot editor. (251 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
Section title (toggle) boolean on
Section title › Subtitle / Title / Description text / text / richtext Title: Recent Post
Blog type choice (recent / popular / recent tag posts) recent_blogpost
No. of blog you want to fetch number 3
Blog design type choice (title only / title link / card / overlay image / horizontal) overlay_image
Tag position choice (inline / overlay) inline
Date format choice (version 1 to 6) version_6
Link label text Read More
Whole card clickable boolean on

Element toggles: featured image (on), title (on), publish date, author, author avatar, read time, excerpt (on), tag. Plus author prefix, read time suffix, and meta separator text.

Style tab

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
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 image design.
  • Make a card: off by default. Background (color / gradient / custom) with backdrop blur, border, responsive padding, shadow, round corner (default round-s).
  • Horizontal layout settings: image width percent, image-to-content gap, collapse breakpoint, vertical alignment.
Elements settings - Section title header

The header has its own Subtitle pill (background, text color, padding, round corner, border, responsive font size, bold), Title (h1 to h6, color, spacing, Highlight style: underline / custom color / gradient / different font on a span-wrapped word), Description (typo style, color, spacing), and Maximum content width for each part.

Elements settings - post elements
Field Type Default
Title › Show post title as h1 to h6 h5
Description › Number of character... number 135
Featured image › Image ratio choice (9 ratios / custom height) aspect-16by9
Featured image › Shadow choice light-shadow
Overlay image › Overlay color bg-overlay-1 to 6 / custom bg-overlay-2

Publish date, read time, and author each carry font size, transform, color (token), and spacing. The Meta row controls gaps between tag, date, and read time. Blog tag and Link groups mirror the other blog modules (tag background / border / offsets; link font style, color, heading level, optional icon, underline).

Developer use only

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

Tips & gotchas

Highlight a word in the header

To emphasize a word in the section title, wrap it in span tags inside the Title field (e.g. "From the span Blog span"), then pick a Highlight style (underline, custom color, gradient, or different font).

Read more link only on title-with-link

The Link label and Link styling apply to the title_link design. In the other designs the whole card (or the title) links to the post instead.

Header is optional

Turn Section title off for a bare feed. When you need a headerless feed with three layouts instead of five designs, Blog Section is the lighter option.