Get Started

Marketing Web Modules

Back to All Modules

Filterable Content

Search (CSOL) Filterable Content in the CMS

Jump to Guidelines and Use Cases

Theme Options:

Module Preview

  • Article

    Program, Sales

    Article

    How Tiers and Points WorkHubSpot's Tier Points Program has been designed to recognize your business's strengths as you grow through tiers.
    Descargar ahora

  • Internal Link

    Brand

    Internal Link

    Product Enablement Resource HomeDig into partner-specific product resources to help you use, market, sell and service everything HubSpot.
    Learn more

  • Course

    Product

    Course

    Tiers & Benefits GuideLearn about our program's tier requirements and the benefits available by tier for solutions partners in 2024.

  • Kit

    Sales

    Kit

    Getting Started with HubSpot developmentLooking to get started with our developer tools, so you can design, build and customize solutions for your clients?
    Learn more

  • Course

    Technical, Sales

    Course

    Partner Program CalendarGet a view into 2024 programs, campaigns, and events. See an event you want to register for?
    Learn more

  • Guide

    Sales, Sales Hub

    Guide

    Solutions Partner Tier BadgesUse your tier badge in places like your website and email signature to differentiate and show your certified expertise with HubSpot.
    Descargar ahora

  • Internal Link

    Program

    Internal Link

    Ecosystem KickoffIn case you missed this year's ecosystem kickoff event, catch the replay or find additional resources on the recap page.
    Learn more

  • Internal Link

    Training, Program

    Internal Link

    How to Build a Successful HubSpot Practice PlaybookNeed help with GTM and sales strategies? Not sure who to hire next or what services to offer? How can your PDM support you.
    Descargar ahora

  • Article

    Technical

    Article

    Revenue Share FormsStep by step instructions on completing all the paperwork required to earn revenue share. You can fill out and submit your ACH.
    Learn more

  • Kit

    Brand, Marketing Hub

    Kit

    Onboarding Resource CenterThe one stop shop for all new partners or new hires at existing partner organizations. Get the fundamentals of the HubSpot.
    Learn more

  • Article

    Program, Sales

    Article

    How Tiers and Points WorkHubSpot's Tier Points Program has been designed to recognize your business's strengths as you grow through tiers.
    Descargar ahora

  • Internal Link

    Brand

    Internal Link

    Product Enablement Resource HomeDig into partner-specific product resources to help you use, market, sell and service everything HubSpot.
    Learn more

  • Course

    Product

    Course

    Tiers & Benefits GuideLearn about our program's tier requirements and the benefits available by tier for solutions partners in 2024.

  • Kit

    Sales

    Kit

    Getting Started with HubSpot developmentLooking to get started with our developer tools, so you can design, build and customize solutions for your clients?
    Learn more

  • Course

    Technical, Sales

    Course

    Partner Program CalendarGet a view into 2024 programs, campaigns, and events. See an event you want to register for?
    Learn more

  • Guide

    Sales, Sales Hub

    Guide

    Solutions Partner Tier BadgesUse your tier badge in places like your website and email signature to differentiate and show your certified expertise with HubSpot.
    Descargar ahora

  • Internal Link

    Program

    Internal Link

    Ecosystem KickoffIn case you missed this year's ecosystem kickoff event, catch the replay or find additional resources on the recap page.
    Learn more

  • Internal Link

    Training, Program

    Internal Link

    How to Build a Successful HubSpot Practice PlaybookNeed help with GTM and sales strategies? Not sure who to hire next or what services to offer? How can your PDM support you.
    Descargar ahora

  • Article

    Technical

    Article

    Revenue Share FormsStep by step instructions on completing all the paperwork required to earn revenue share. You can fill out and submit your ACH.
    Learn more

  • Kit

    Brand, Marketing Hub

    Kit

    Onboarding Resource CenterThe one stop shop for all new partners or new hires at existing partner organizations. Get the fundamentals of the HubSpot.
    Learn more

  • Article

    Program, Sales

    Article

    How Tiers and Points WorkHubSpot's Tier Points Program has been designed to recognize your business's strengths as you grow through tiers.
    Descargar ahora

  • Internal Link

    Brand

    Internal Link

    Product Enablement Resource HomeDig into partner-specific product resources to help you use, market, sell and service everything HubSpot.
    Learn more

  • Course

    Product

    Course

    Tiers & Benefits GuideLearn about our program's tier requirements and the benefits available by tier for solutions partners in 2024.

  • Kit

    Sales

    Kit

    Getting Started with HubSpot developmentLooking to get started with our developer tools, so you can design, build and customize solutions for your clients?
    Learn more

  • Course

    Technical, Sales

    Course

    Partner Program CalendarGet a view into 2024 programs, campaigns, and events. See an event you want to register for?
    Learn more

  • Guide

    Sales, Sales Hub

    Guide

    Solutions Partner Tier BadgesUse your tier badge in places like your website and email signature to differentiate and show your certified expertise with HubSpot.
    Descargar ahora

  • Internal Link

    Program

    Internal Link

    Ecosystem KickoffIn case you missed this year's ecosystem kickoff event, catch the replay or find additional resources on the recap page.
    Learn more

  • Internal Link

    Training, Program

    Internal Link

    How to Build a Successful HubSpot Practice PlaybookNeed help with GTM and sales strategies? Not sure who to hire next or what services to offer? How can your PDM support you.
    Descargar ahora

  • Article

    Technical

    Article

    Revenue Share FormsStep by step instructions on completing all the paperwork required to earn revenue share. You can fill out and submit your ACH.
    Learn more

  • Kit

    Brand, Marketing Hub

    Kit

    Onboarding Resource CenterThe one stop shop for all new partners or new hires at existing partner organizations. Get the fundamentals of the HubSpot.
    Learn more
Module Preview

FAQ's

How To Use This Module

With intuitive filtering options and interactive content cards, visitors can seamlessly navigate and discover relevant resources, enhancing their overall user experience.

This module consists of two core elements – the Filter Menu, and Content Card. These essential sections are consistently present across all breakpoints in different configurations

Use Cases

Multiple Data Sources

Choose between manual content entry or HubDB table integration. HubDB mode supports two content types: default (description, image, CTA) and code snippets (BETA) with syntax highlighting and copy functionality.

Advanced Filtering System

Configure 2-4 filters with customizable display types (checkbox or dropdown). Filter 1 is always a dropdown and can show as badges. Filters 2-3 can be checkboxes or dropdowns with optional badge display (brand, positive, or default styling). Filter 4 can be checkboxes or dropdowns but does not support badge display. In Horizontal layout, all filters are forced to dropdowns and the display type selector is hidden.

Checkbox Filter Logic

When one or more of Filters 2-4 are configured as checkboxes, the Checkbox Filter Logic field controls how multi-selection is evaluated. This field is hidden in Horizontal layout (where all filters are dropdowns).

  • Match ALL (AND) _(default)_ — A card must match every selected option. Example: selecting "North America" + "Europe" returns only cards tagged with both.
  • Match ANY (OR) — A card must match at least one selected option. Example: selecting "North America" + "Europe" returns cards tagged with either or both.

This setting applies to all checkbox filters in the module simultaneously.

Search Functionality

Enable optional search that queries across card titles, descriptions, CTA text, and all filter values. Supports multiple space-separated terms (all must match).

Initial Search / Template-level Filtering

The module supports pre-filtering content through template-level HubL variables. Set `filterable_content_initial_search_query` at the template level to apply an initial search term. This works in combination with other initial filter variables (`filterable_content_initial_filter1-4`). See "State Management" section below for details.

Three Filter Layouts

  • Default (Left-aligned): Filters in a card on the left side with accordions
  • Top-aligned: Filters above content in accordions with single-open behavior
  • Horizontal: Filters always rendered as dropdowns — stacked vertically on mobile, aligned in a single row above the results on desktop

Pagination

Optional pagination with configurable items per page. Displays "Showing X-Y of Z items" label and page navigation.

Card Layout Options

Choose between default grid view or gallery view. Gallery view features full-image cards when no description is present. Control image fit (cover/contain) and mobile image visibility.

Badge System

Display filter values as colored badges (ribbon-left style) on card images or as text within card content. Supports default (gray), brand, and positive badge types.

Badge Configuration:

  • Filters 1-3 can be configured to show as badges
  • Filter 4 cannot be shown as a badge (no badge configuration available)
  • Maximum of 2 badges will display per card (first 2 filters with badge display enabled)
  • Remaining filter values appear as text within card content
Get on-brand assets for your module
BrandfolderCanva

Guidelines

Core Elements

    - Filter Menu:
  1. Offers up to 4 filter categories (set to 2 filters by default)

    • Filter Menu can display as either default left-aligned (to the left of the cards), top-aligned (above the cards) or Horizontal (horizontally aligned as dropdowns on top of the cards, stacked on mobile).

  2. Filter Types:
      - Primary Filter (Filter 1):
    1. Filter is displayed as a dropdown menu

      • Functions as a badge on the card
      • Only ONE can be selected for each card
      • HubDB column type (if required): 'Select' type

      2. - Secondary Filters (Filters 2-4):
    2. Filters are displayed as checkboxes (or buttons if set to top-aligned) or dropdowns

      • Supports multiple selections
      • Multiple of each filter type can be added to a given card
      • Up to 3 additional filters can be configured as required
      • HubDB column type (if required): 'Multi-Select' type

      3. - Checkbox Filter logic:
    3. Checkbox filters can match all the selected options or at least one of the selected options

      • Applies to all the checkbox filters available in the module (if any)

  3. Content Cards:
  4. Cards within the module consist of information such as:

    • Image (optional) (recommended dimensions: 250px × 150px)
    • Primary filter tag (displayed as a badge)
    • Secondary filter labels (up to 3)
    • Title
    • Description
    • CTA (optional)

  5. Card CTAs:

    • Manual data entry: Links can have several destination type (external link, modal trigger, product CTA, etc)
    • HubDB data: Either external links, or modal triggers
    • Note about modals: To set up a modal trigger, add a "(CSOL) Pop-Up Modal" module to your page, and link your card to it via the ID (e.g. example-case-study)

  6. Card Layout Options:
      - Grid View (default):
    1. Cards will show in standard layout, with optional brand shapes if no image is present.

      2. - Gallery View:
    2. Cards will show in a masonry layout. Brand shapes do not show, if there is no image.

      • If Gallery View is selected, then cards can optionally be displayed in Full-Image mode. To enable Full-Image mode for a card, simply remove its description text. The image will now show as the full width and height of the card. Note that the card's title becomes the CTA text when Full-Image mode is enabled.

Things to Know

  • Filter 1 can only have ONE filter associated with it. This is what will appear in the badge in the top right corner of the card. For Filters 2-4 you can have numerous filter options and these are what will appear as the checkbox filters and above the title on the cards.
  • For the desktop card variation, there’s space for an optional thumbnail image. If not provided, a random asset will be placed instead, from a selection of 3 options.
  • Image: 150x250px

Similar Modules

Photo Gallery

Display a collection of photos on your page.

What's New?

| v5.7.0 March 2026

  • New “Checkbox filter logic” selector which defines the filtering logic of all the available checkboxes in the module (if any). Options are “Match all selected options” and “Match at least one selected option”.

| v2.35.0 September 2025

  • New option to override placeholder/default option text in Filterable Content.

| v2.34.2 August 2025

  • Filterable Content now has option (BETA) to present copiable code snippets.

| v2.33.0 July 2025

  • Filterable layout now includes horizontal and top aligned layout options
  • all filters can now be displayed as dropdowns

| v2.25.0 April 2025

  • Filterable Content has some spacing and layout updates and an improved user experience

| v2.24.0 March 2025

  • The module now has the ability to add pop-up modals when using a HubDB table
  • Added gallery view, which allows the cards to show in a masonry layout, and can have various card types such as image only, and image and text.
  • There is now an option for filters to display across top of the filterable content module

| v2.17.0 October 2024

  • The heading has been removed from the Filterable Content module in favor of marketers using the Section Header module to fulfill this need and ensure consistency across CSOL modules

| v2.16.1 October 2024

  • This module now has the ability to enable display card images on mobile