Blog Modules
Overview
Tonic's blog system consists of eight global modules designed to slot into HubSpot's standard blog template areas. They are pre-wired in the Tonic blog listing and blog post templates — you don't need to configure them unless you want to customize defaults.
Blog Listing
The main post grid for the blog index page. Automatically adapts its layout for four contexts:
- Default listing — All posts, newest first, paginated.
- Tag filter — Posts filtered by the active topic tag.
- Author filter — Posts filtered by author.
- Simple list (/all) — Compact list view of all posts.
Blog Filter
Topic/tag pill bar. Reads all HubSpot blog topics and generates the correct filter URLs. The active topic pill reflects the current filter. Place above the Blog Listing module in the listing template.
Blog Pagination
Wired to HubSpot's native pagination variables. Only renders when there is more than one page. Three styles selectable in the module settings: Numbered, Simple (previous/next only), and Minimal (older/newer text links).
Blog Post Header
Global module that renders at the top of every blog post. Displays: featured image, category tag, post title, author name and avatar, publish date, estimated read time, and topic tags.
Blog Table of Contents
Automatically scans the post body for H2 and H3 headings and generates a linked table of contents. Smooth-scroll jump links. Active section tracking as the reader scrolls. Collapses to a toggle dropdown on mobile. Configurable heading depth (H2 only or H2 + H3).
Blog Post Body
Global wrapper module for the HubSpot post content editor output. Applies Tonic's .prose typography styles — optimized line height, heading scale, link styling, blockquote styling, and code block formatting — to the post body.
Blog Author Box
Displays below the post body when the post has an assigned author. Shows: avatar, name, bio, and social links. Reads from the HubSpot author record.
Blog Related Posts
Shows at the end of each post. Scores related posts by content similarity and shared topic tags. Displays as a card grid with featured image, topic tag, title, author, date, and excerpt. Card count (3 or 4) is configurable.