Skip to content

Blog Listing

The main post loop for a blog index. It renders every post the blog returns as a configurable grid or stacked list of cards - featured image, tags, title, excerpt, date, read time, author, and a read-more link. Best for: blog index pages, "latest articles" / "from the blog" sections, recent-news listings driven by the HubSpot blog.

📷 Hero image

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

A blog index post loop drawn as a three-column card grid on a Light background. Each card shows a rounded featured image on top, then tag chips, a bold Dark title, a short excerpt, and a footer row with the author and a read-more link. Show a full row of three cards at desktop width. Captured at desktop width.

At a glance

Blog Listing Cards Grid

  • What it does: loops over the blog's posts and draws each one with a chosen card design. Five view types are available: vertical Card, Card 2, Text card (no image), Horizontal stack (image beside text), and Overlay card (text over a full-bleed image).
  • Best used for: the primary post feed on a blog index or a resource-center listing page, where every post in the blog should appear.
  • Not the right fit if: you want to hand-pick a few recent or popular posts inside a landing page (use Blog Section or Blog Post - Recent Post), or you only need the numbered pager (use Blog Pagination).
  • 🔗 Live demo: (add demo link)

Add it to your page

  1. Open a Blog listing template in the HubSpot editor.
  2. Click Add and search for Blog Listing, then drop it where the post loop belongs.
  3. Under Click to update content, pick a Blog listing view type (card / card 2 / text card / horizontal stack / overlay card).
  4. Toggle the post elements you want: featured image, publish date, read time, tags, description, author.
  5. Set your grid Columns per breakpoint in Layout settings.
  6. Style the card and each element in the Style tab, then pair with Blog Pagination below the loop.

Design recipes

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

Image-top cards with a footer holding the author and read-more link.

📷 Result

Target file: recipe-card-grid-default.webp

Three image-top cards in a row, each with a divider above a footer that holds the author name and a read-more link, on a Light background.

Field Set to
Content › Blog listing view type card
Layout › Columns › Large / Medium / Small 3 / 2 / 1
Card › Image zoom on hover on
Card › Footer › Show divider on

A compact list with no images: tags, title, excerpt, author.

📷 Result

Target file: recipe-text-only-list.webp

A compact, image-free listing where each entry shows tag chips, a bold Dark title, a short trimmed excerpt, and the author, stacked cleanly on a Light background.

Field Set to
Content › Blog listing view type text_card
Content › Show featured image off
Description › How many character... 110

Image beside the text, with a wider text column.

📷 Result

Target file: recipe-horizontal-stack.webp

A post row with the featured image on the left and a wider text column on the right holding the tags, title, excerpt, and author, using a 3fr to 7fr split.

Field Set to
Content › Blog listing view type horizontal_stack
Horizontal stack layout › Width of elements 3fr 7fr
Horizontal stack layout › Arrangement media_content

Full-bleed image with a dark gradient and text on top.

📷 Result

Target file: recipe-overlay-card.webp

Cards where the text sits over a full-bleed featured image darkened by an overlay, with the title and excerpt in Light text near the bottom of each card.

Field Set to
Content › Blog listing view type overlay_card
Overlay Card › Overlay › Overlay style bg-overlay-5
Overlay Card › Minimum height 320

"I want to..." quick reference

Goal Setting
Pick the card layout Content › Blog listing view type
3-up / 2-up / 1-up columns Layout › Columns = 3 / 2 / 1
Show estimated read time Content › Show read time (+ read time label / meta separator)
Hide the featured image Content › Show featured image off
Tags floating on the image Card view + Show tags (styled in the Overlay tag group)
Image grows on hover Card › Image zoom on hover + Zoom scale
Image beside text, text wider Horizontal stack › Arrangement + Width of elements (e.g. 2fr 3fr)
Read-more as a button Detail page link › How you want to show a link = Button
Add an arrow to the read-more Detail page link › Add icon
Divider above the card footer Card › Footer › Show divider
Dark gradient over overlay images Overlay Card › Overlay › Overlay style
Limit excerpt length Description › How many character you have to show in description

Field reference

The editor is organized into a Content tab and a Style tab. Groups below match the HubSpot editor. (242 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
Blog listing view type choice (card / card 2 / text card / horizontal stack / overlay card) card
Show featured image / publish date / tags / description / author boolean on
Show read time boolean off

Default labels: Read more button (Read more), Author prefix (By), Read time label (min read), Meta separator (a small dot).

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.
  • Horizontal stack layout: width ratio (1fr 1fr to 7fr 3fr), stacking breakpoint, arrangement (media-first or content-first), image-to-content gap, spacing between stacks, meta-row gap.
  • Section wrapper container: default / full-width / custom per breakpoint + block alignment.
  • Inner content container: independent inner width + alignment.
Preset Settings - Featured image, date, title, description
Field Type Default
Featured image › Ratio of image choice (9 ratios / custom height) aspect-16by9
Featured image › Round corner round-0 to round-xxl / custom round-xl
Featured image › Shadow none / light / regular / dark none
Publish date › Date print like choice (9 formats) MM/dd/yyyy
Title › Show title as h1 to h6 h5
Description › How many character... number 110

Each element group also carries color (token), spacing under element (sb-0 to sb-4xl), text transform, and font style controls.

Preset Settings - Tag, Author, Detail page link, Overlay tag
  • Tag chips: background (color / gradient / none), border, round corner, typography, spacing between tags.
  • Author: name typography, avatar size and round corner, photo-to-name spacing, author prefix text.
  • Detail page link: simple text link or button (btn-1 to btn-8); optional icon with size and gap (gap-0 to gap-4xl); link color, hover color, underline.
  • Overlay tag (on image): max tags, background, text color, round corner, padding, top / left offset, backdrop blur.
Card

Wrap each post in a card (on by default). Controls: image zoom on hover + scale, background (color / gradient / custom) with optional backdrop blur, border, responsive padding, shadow (default none), round corner (default round-m), and a footer divider above the author + read-more row.

Overlay Card

For the overlay view: minimum height, image zoom + scale, overlay style (token / custom color / gradient, default bg-overlay-5), responsive content padding, shadow, round corner.

Developer use only

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

Tips & gotchas

Match columns to the layout

The Horizontal stack view reads best at 1 to 2 columns. Card and Text views shine at 3-up on desktop. Set Columns to suit the view you picked.

Keep overlays for readable text

On the Overlay card view, keep an Overlay style (default bg-overlay-5) so the title and excerpt stay legible over busy featured images.

This is the full loop, not a curated feed

Blog Listing renders every post the blog returns for the page. To hand-pick recent, popular, or tag-filtered posts inside a landing page, use Blog Section or Blog Post - Recent Post instead.