--- title: Filterable Gallery description: Filterable Gallery Module image: https://www.techclaro.in/hubfs/Group%2018151-1.png --- [Skip to main content](https://www.techclaro.in/modules/filterable-gallery#main-content) [![techclaro-logo](https://www.techclaro.in/hubfs/techclaro-logo.svg)](https://techclaro.com/) Menu [CONTACT US](https://techclaro.com/) 1. [Home](https://www.techclaro.in/) 2. [Marketplace Modules](https://www.techclaro.in/modules) 3. Filterable Gallery Marketplace Module # Filterable Gallery Paid - [HubSpot Modules](https://www.techclaro.in/modules/tag/hubspot-modules) Images, cards or blog posts in a grid that visitors narrow down with up to four filters, search and sorting. Best for Portfolios, case studies, resources, team or product listings ![](https://www.techclaro.in/hs-fs/hubfs/Group%2018151-1.png?width=1200&name=Group%2018151-1.png) Our work ## Projects we're proud of Filter by industry, service or region to find work like yours. Filters Search projects Industry All Finance Healthcare Retail SaaS Service All Branding Web design Paid media SEO Region All North America Europe Asia Pacific Clear filters ![gallery2](https://www.techclaro.in/hs-fs/hubfs/gallery-images/gallery2.png?width=534&height=423&name=gallery2.png) Case study ### Northwind Bank A calmer, more human brand for a 90-year-old regional bank. - Finance - Branding - Web design - North America Sep 14, 2026 ![gallery5](https://www.techclaro.in/hs-fs/hubfs/gallery-images/gallery5.png?width=534&height=423&name=gallery5.png) Case study ### Pulse Health app launch Taking a patient booking app from beta to 200,000 downloads in a quarter. - Healthcare - Web design - Paid media - Europe Aug 2, 2026 ![gallery4](https://www.techclaro.in/hs-fs/hubfs/gallery-images/gallery4.png?width=534&height=423&name=gallery4.png) Case study ### Fieldstone Outdoor store A faster, search-friendly storefront that doubled organic revenue. - Retail - Web design - SEO - North America Jun 21, 2026 ![pexels-harrisonhaines-3204051 1](https://www.techclaro.in/hs-fs/hubfs/gallery-images/pexels-harrisonhaines-3204051%201.png?width=518&height=404&name=pexels-harrisonhaines-3204051%201.png) Project ### Orbit Analytics A sharper identity and content engine for a fast-growing data platform. - SaaS - Branding - SEO - Europe May 9, 2026 ![Desktop-banner](https://www.techclaro.in/hs-fs/hubfs/banner-images/Desktop-banner.jpeg?width=2080&height=1264&name=Desktop-banner.jpeg) Campaign ### Kite Insurance Always-on paid campaigns that cut cost per quote by 38 percent. - Finance - Paid media - Asia Pacific Mar 30, 2026 ![banner-homepage](https://www.techclaro.in/hs-fs/hubfs/banner-images/banner-homepage.jpg?width=1500&height=1002&name=banner-homepage.jpg) Project ### Harbor Clinics Local search pages that put 24 clinics at the top of the map. - Healthcare - SEO - North America Feb 12, 2026 ![Banner-Design](https://www.techclaro.in/hs-fs/hubfs/banner-images/Banner-Design.jpeg?width=1500&height=800&name=Banner-Design.jpeg) Campaign ### Bloom Grocery A cheerful rebrand and launch campaign for a new delivery service. - Retail - Branding - Paid media - Asia Pacific Dec 4, 2025 ![pexels-hillaryfox-1595388 1](https://www.techclaro.in/hs-fs/hubfs/gallery-images/pexels-hillaryfox-1595388%201.png?width=1038&height=578&name=pexels-hillaryfox-1595388%201.png) Case study ### Lumen CRM A product-led website with interactive tours for every plan. - SaaS - Web design - Paid media - North America Oct 18, 2025 ![banner-slide3](https://www.techclaro.in/hs-fs/hubfs/banner-images/banner-slide3.jpeg?width=1600&height=650&name=banner-slide3.jpeg) Project ### Atlas Payroll Technical SEO and a new docs hub for a payroll platform. - SaaS - SEO - Web design - Europe Sep 6, 2025 Nothing matches those filters yet. Try removing one. Load more Our Blog ## Latest Posts Filter from our blog posts Filters Search posts Topic All Hubspot ui/ux Author All Developer Clear filters ![](https://www.techclaro.in/hubfs/module-documentation/Banner-module.png) Hubspot ### [Documentation for HubSpot Modules - Banner Slider](https://www.techclaro.in/clarohub-blog/banner-slider) Introduction: The Scroll Back to Top module is designed to enhance user experience by providing a quick and easy way for visitors to navigate back to the top of the page. - Hubspot Dec 20, 2023 Developer ![](https://www.techclaro.in/hubfs/banner-images/banner-homepage.jpg) Hubspot ### [Documentation for HubSpot Modules - Page Progress Bar](https://www.techclaro.in/clarohub-blog/page-progress-bar) Introduction: The Page Progress Bar module is designed to enhance user engagement by displaying a visual indicator of the progress as visitors scroll through your ... - Hubspot - ui/ux Dec 20, 2023 Developer ![](https://www.techclaro.in/hubfs/banner-images/Desktop-banner.jpeg) Hubspot ### [Documentation for HubSpot Modules - Back to top](https://www.techclaro.in/clarohub-blog/back-to-top) Introduction: The Scroll Back to Top module is designed to enhance user experience by providing a quick and easy way for visitors to navigate back to the top of the page. - Hubspot - ui/ux Dec 20, 2023 Developer ui/ux ### [Harnessing Footstep Energy: The Future of Electricity Generation](https://www.techclaro.in/clarohub-blog/harnessing-footstep-energy-the-future-of-electricity-generation) Electricity is originating underneath your feet!!! - ui/ux Dec 20, 2023 Developer ![](https://www.techclaro.in/hubfs/banner-images/Banner-slide.png) ui/ux ### [Harnessing Footstep Energy: Revolutionizing Electricity Generation](https://www.techclaro.in/clarohub-blog/electricity-generation-from-stunning-power-sources) Electricity is originating underneath your feet!!! - ui/ux Dec 20, 2023 Developer Hubspot ### [How to Write a Test Blog Post That Converts](https://www.techclaro.in/clarohub-blog/how-to-write-a-test-blog-post-that-converts) Learn how to create a captivating and SEO-optimized blog post that effectively converts readers into customers. One or more paragraphs about Understanding Your Target ... - Hubspot - ui/ux Dec 20, 2023 Developer Nothing matches those filters yet. Try removing one. Load more Get the module Share - - - - [mailto:?subject=%3Cspan+id%3D%22hs_cos_wrapper_name%22+class%3D%22hs_cos_wrapper+hs_cos_wrapper_meta_field+hs_cos_wrapper_type_text%22+style%3D%22%22+data-hs-cos-general-type%3D%22meta_field%22+data-hs-cos-type%3D%22text%22+%3EFilterable+Gallery%3C%2Fspan%3E&body=https%3A%2F%2Fwww.techclaro.in%2Fmodules%2Ffilterable-gallery](mailto:?subject=%3Cspan+id%3D%22hs_cos_wrapper_name%22+class%3D%22hs_cos_wrapper+hs_cos_wrapper_meta_field+hs_cos_wrapper_type_text%22+style%3D%22%22+data-hs-cos-general-type%3D%22meta_field%22+data-hs-cos-type%3D%22text%22+%3EFilterable+Gallery%3C%2Fspan%3E&body=https%3A%2F%2Fwww.techclaro.in%2Fmodules%2Ffilterable-gallery) Module ## Documentation On this page 1. [Overview](https://www.techclaro.in/modules/filterable-gallery#1) 2. [Key features](https://www.techclaro.in/modules/filterable-gallery#2) 3. [Content fields](https://www.techclaro.in/modules/filterable-gallery#3) 4. [Style fields](https://www.techclaro.in/modules/filterable-gallery#4) 5. [Getting started](https://www.techclaro.in/modules/filterable-gallery#5) ### Overview Filterable Gallery shows up to 60 items (images, cards or blog posts) in a grid. Visitors narrow it down with up to four filters, a search box and sorting. Filtering happens instantly in the browser, with no page reload. ### Key features - Two sources: **Items I add** (image, eyebrow, title, description, link, date and tags) or **Blog posts** from any blog, filtered by topic, author and year. - Up to four filters, each with its own name and list of options. - Filters shown as buttons, dropdowns or checkbox lists, with single or multiple choices. - Counts on each option that update as visitors filter; options with no matches are dimmed. - Search, sorting (original order, newest, oldest, title), a Clear filters button and a results count such as "Showing 6 of 9". - Grid, masonry or list layout; image-and-text, text-over-image or image-only cards. - Columns for desktop, tablet and mobile; image shape; Load more paging. - A lightbox with next and previous for items that have no link. - Optional URL sync, so a filtered view can be bookmarked or shared. 1. 1 #### How filtering works 1. Under **Filters**, add a filter (for example "Industry") and its **Options** (Finance, Healthcare, Retail, SaaS). 2. On each item, type its **Tags**, separated by commas: `SaaS, Europe, Branding`. 3. Each tag counts toward whichever filter lists that option, so the order of tags doesn't matter and filters can be renamed or reordered without retagging. 4. Within one filter, an item matches if it has **any** chosen option. Across filters, it must match **every** filter. For example, SaaS + Europe shows SaaS projects in Europe. A filter with no options is left off the live page; the editor shows a note instead. Options that no item uses yet still show, with a count of 0. 2. 2 #### Blog mode Choose **Blog posts** as the source, pick a blog (or leave it empty for the default blog) and set the number of posts. Filters for Topic, Author and Year are built from the posts automatically, and each can be turned off or renamed. ### Content fields | Group | Fields | | --- | --- | | Section header | Show header, eyebrow, heading, heading level, intro text | | Source | Items or blog posts; blog, number of posts, topic/author/year filters and their names | | Filters (up to 4) | Filter name, options | | Items (up to 60) | Image, eyebrow, title, description, link, date, tags | | Controls | Filter style, multiple choices, "All" label, option order, counts, search and placeholder, sort and its labels, clear button, results text, collapse filters on mobile, URL sync | | Display | Layout, card style, image shape, columns (desktop, tablet, mobile), which card details show, tags on cards, read more, lightbox, items per page, Load more text, empty message, date format | | Accessibility labels | Screen reader labels for the filter bar, results and lightbox | ### Style fields Text, Background and colors (accent follows the brand kit), Border, Hover, Corner, Spacing, Alignment and Animation.   1. 1 #### Tips Keep tags spelled exactly as the options (case doesn't matter).Edit the results text (default "Showing {count} of {total}") to fit your wording; the numbers are filled in automatically.Turn on URL sync for resource libraries, so sales teams can send links to a pre-filtered view. ### Getting started Add a module from the page editor's module list, then replace the demo content with your own. No setup is needed in Design Manager. 1. Install the module from the HubSpot Marketplace. It appears in your portal's module list. 2. Open a page, landing page or blog template in the editor. 3. Select **Add** (the + icon), search for the module's name, and drag it onto the page. 4. On the **Content** tab, replace the demo text, images, episodes or items with your own. Repeating items (steps, filters, gallery items, episodes, chapters) have **Add** buttons and can be reordered by dragging. 5. On the **Style** tab, adjust colors, fonts, borders, corners, spacing and animation. Leave fields as they are to keep your brand kit and theme defaults. 6. Preview the page on desktop and mobile, then publish. ## Can't find the module you need? Tell us what you're building and we'll point you to the right module. [Get in touch](https://techclaro.com/contact-us/) [![techclaro](https://www.techclaro.in/hubfs/techclaro-white.svg)](https://www.techclaro.in/) Modules and resources for teams building on HubSpot CMS. - - - - - ## Company [Fix vibe-coded app](https://www.techclaro.in/fix-vibe-coded-app) [Webflow development](https://www.techclaro.in/hire-webflow-developer) ## Contact No : 31 / 406, Ground Floor, VeeYes building, Opposite Govt CyberPark, K T Thazham, Calicut, India, Kerala [Get directions](https://www.techclaro.in/modules/google.com/maps?gs_lcrp=EgZjaHJvbWUqBggAEEUYOzIGCAAQRRg7MgYIARBFGDwyBggCECMYJzIPCAMQLhgNGK8BGMcBGIAEMgYIBBBFGDwyBggFEEUYPDIGCAYQRRg8MgYIBxBFGDzSAQg0OTk2ajBqN6gCALACAA&um=1&ie=UTF-8&fb=1&gl=in&sa=X&geocode=KS_UcHoAW6Y7MWhh0aLJ3Udz&daddr=NH+966,+Poovangal,+Kozhikode,+Keralam+673016) [info@techclaro.com](mailto:info@techclaro.com) ## Recognized by: - [![](https://www.techclaro.in/hubfs/google-logo.webp) Trustpilot **5** ★★★★★★★★★★](https://www.google.com/search?q=techclaro%5C&sca_esv=667d99080ae92dcb&sxsrf=AKL5yDjidyUnySYQ8pey6LDo5rPSqn-cwA%3A1793548251068&ei=21_naoDhA_KQseMPoOakmQM&biw=1440&bih=778&uact=5&oq=techclaro%5C&gs_lp=Egxnd3Mtd2l6LXNlcnAiCnRlY2hjbGFyb1wyBBAjGCcyBBAjGCcyBBAjGCcyDRAuGIAEGA0YxwEYrwEyBxAAGIAEGA0yBxAAGIAEGA0yBxAAGIAEGA0yBxAAGIAEGA0yBxAAGIAEGA0yBxAAGIAEGA1I4QdQ1AJY0AdwAXgAkAEAmAGFAaABhQGqAQMwLjGwAQC4AQPIAQD4AQGYAgKgArABwgIIEAAY7wUYsAOYAwDiAwQYACBd4gMEGAAgXuIDBBgAIF_iAwQYACBg4gMEGAAgYeIDBBgAIGKIBgGQBgWSBwMxLjGgB9sJsgcDMC4xuAeeAcIHBTItMS4xyAcSgAgB&sclient=gws-wiz-serp) - [![](https://www.techclaro.in/hubfs/trustpilot.jpg) Trustpilot **4.2** ★★★★★★★★★★](https://www.trustpilot.com/review/techclaro.com) © 2026. All rights reserved. © 2026 TechClaro Solutions. All rights reserved. - [Privacy policy](https://techclaro.com/privacy-policy/) - [Terms and conditions](https://techclaro.com/terms-and-conditions/) ```json { "@context" : "https://schema.org", "@type" : "BlogPosting", "author" : { "@type" : "Person", "name" : "Techclaro Solutions", "url" : "https://www.techclaro.in/modules/author/techclaro-solutions" }, "dateModified" : "2026-11-01T18:37:51.702Z", "datePublished" : "2026-10-28T17:53:02.000Z", "headline" : "Filterable Gallery", "image" : [ "https://www.techclaro.in/hubfs/Group%2018151-1.png" ], "mainEntityOfPage" : { "@id" : "https://www.techclaro.in/modules/filterable-gallery", "@type" : "WebPage" }, "publisher" : { "@type" : "Organization", "logo" : { "@type" : "ImageObject", "url" : "https://www.techclaro.in/hubfs/Techclaro-logo/TECHLARO-logo.svg" }, "name" : "Techclaro Solutions" } } ```