Skip to content

Blog Tags

A blog tag / topic filter for listing pages - it renders the blog's tags as a row of clickable pills or as a dropdown so visitors can filter posts by topic. Best for: blog listing headers, resource-center category filters, "filter by topic" bars above a post grid.

📷 Hero image

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

A blog topic filter bar rendered as a horizontal row of clickable tag pills on a Light background, sitting above a post grid. Show an "All articles" pill plus several topic pills, with the active pill filled in the Primary color and Light text while the rest stay plain. Captured at desktop width. Frame it tightly on the filter row.

At a glance

Blog Tags Filter

  • What it does: pulls the blog's tags and renders them as a sorting control. Two modes: a row of clickable tag links or a single dropdown select. In pill mode the tags collapse into a responsive select box below a chosen breakpoint. An "All articles" entry always clears the filter, and the active tag is highlighted automatically.
  • Best used for: the topic filter bar above a Blog Listing loop, letting visitors narrow posts by tag.
  • Not the right fit if: you want page navigation instead of a topic filter (use Blog Pagination), or a full post feed rather than a filter (use Blog Section).
  • 🔗 Live demo: (add demo link)

Add it to your page

  1. Open a Blog listing template in the HubSpot editor.
  2. Click Add, search for Blog Tags, and drop it above the post grid.
  3. Under Click to update content, set Show blog sorting as (dropdown / clickable tag / none).
  4. Rename the All articles entry under Default labels if you like.
  5. Style the pills or the dropdown in the Style tab, including simple and active states.
  6. For pill mode, set the Responsive selectbox breakpoint so tags collapse gracefully on narrow screens.

Design recipes

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

A horizontal row of tag links with a filled active pill.

📷 Result

Target file: recipe-clickable-pills-default-row.webp

A single row of tag pills with the active tag filled in the Primary color and Light text, the rest plain, evenly spaced on a Light background.

Field Set to
Content › Show blog sorting as clickable_tag
Clickable tag › Active state › Background color bg-primary
Clickable tag › Spacing between tags 8

Bordered pills that fill in when active.

📷 Result

Target file: recipe-outlined-pills.webp

Tag pills outlined with a Primary border, where the active tag fills solid in the Primary color with Light text.

Field Set to
Clickable tag › Show border on
Clickable tag › Simple state › Border color Primary token
Clickable tag › Active state › Background color bg-primary

A single select box instead of pills.

📷 Result

Target file: recipe-dropdown-filter.webp

A single dropdown select box with a Primary background and a visible arrow, replacing the row of pills as the topic filter.

Field Set to
Content › Show blog sorting as dropdown
Dropdown › Background color bg-primary
Dropdown › Make select box in full width in mobile on

Pills on desktop that fold into a select box at tablet.

📷 Result

Target file: recipe-responsive-collapse.webp

A side-by-side idea: the pill row at desktop width and the same filter collapsed into a full-width select box at tablet width.

Field Set to
Content › Show blog sorting as clickable_tag
Responsive selectbox › At which point... medium_tablet
Responsive selectbox › Make select box in full width on

"I want to..." quick reference

Goal Setting
Show tags as clickable pills Content › Show blog sorting as = clickable_tag
Show tags as a dropdown Content › Show blog sorting as = dropdown
Hide the sorting control Content › Show blog sorting as = none
Rename the "all" entry Content › Default labels › All articles
Fill the current tag Clickable tag › Active state › Background color
Outline the pills Clickable tag › Show border + simple / active Border color
Round the pills more Clickable tag › Round corner (or custom px)
Space tags further apart Clickable tag › Spacing between tags
Collapse pills to a select on tablet Responsive selectbox › At which point...
Stretch the select box full width Responsive selectbox / Dropdown › Make select box in full width
Recolor the dropdown arrow Dropdown / Responsive selectbox › Select icon color
Move the dropdown arrow inward How many percent you want to shift the icon from right
Bold the tag / select text Clickable tag / Dropdown › Make font bold

Field reference

The editor is organized into a Content tab and a Style tab. Groups below match the HubSpot editor. (143 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
Show blog sorting as choice (dropdown / clickable tag / none) dropdown
Default labels › All articles text All resources

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
  • Section wrapper container: default / full-width / custom per breakpoint + block alignment.
  • Inner content container: independent inner width + alignment.
Elements settings - Clickable tag
Field Type Default
Spacing around text [desktop / mobile] spacing 10px / 7px
Round corner round-0 to round-xxl / custom round-m
Spacing between tags number 8
Make font bold boolean off
Show border + Border width boolean / number off / 1

Simple state and Active state each set background (color / gradient / none), border color, and text color. The active pill defaults to a Primary background with White text.

Elements settings - Responsive selectbox

Shown in clickable-tag mode below the chosen breakpoint. Controls: collapse breakpoint (small / medium / big tablet), background, text color, border, round corner (default round-s), padding, full-width toggle, and the dropdown arrow (color, size, horizontal shift percent, stroke width).

Elements settings - Dropdown

For the dropdown mode: background (default bg-primary), text color, border, round corner, desktop / mobile padding, bold toggle, box text alignment, full-width-on-mobile toggle, and the dropdown arrow (color, size, separate desktop / mobile shift percent, stroke width).

Developer use only

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

Tips & gotchas

The active tag styles itself

The current tag (matched by its slug) automatically receives the Active state styling, and "All articles" is active when no topic is selected. You only style the states, not each tag.

Responsive collapse is pill-mode only

The Responsive selectbox group only applies when Show blog sorting as is clickable_tag. In dropdown mode the tags are always a select box.

Arrow position is a percentage

How many percent you want to shift the icon from right places the dropdown arrow across the box as a percentage. Higher values push it toward the right edge.