Contact us
View Preview →

Team Directory with Filter

HubSpot Module — Setup & Usage Guide

1. Module Location

The Team Directory with Filter module is saved in the Design Manager, under Content.

Path: Manage → Content → Design Manager

Navigating to the module in Design Manager
Locate the module in Design Manager

2. How to Use the Module

Step 1 — Find the module

Click the + icon in the page editor to open Add modules, then search for the module name “Team Directory with Filter.”

Searching for the module in Add modules
Search “Team Directory with Filter” in the module picker

Step 2 — Add it to the page

Drag the module from the search results panel onto the desired section of the page.

Dragging the module onto the page
Drag the module onto the page canvas

Step 3 — Edit the content

Open the module's Content tab. At the top, edit the Eyebrow (“Our people”), the Heading (“Team by department”), the Filter Label shown before the chips, the All Chip Text, and the Empty State Heading + Text shown when a filter matches nothing. Below that sits the Departments list.

Content tab with labels, empty state and departments fields
Content tab — labels, empty state, and Departments list

To update a department, hover over the item in the Departments list and click the pencil icon. Each department has a Department Key, a Department Label, an Icon (Engineering, Production, Quality, or Sales), and a nested Members list. You can add between 1 and 8 departments.

Department editor with key, label, icon and members fields
Department editor — Key, Label, Icon, Members

To update an individual member, hover over the item in the Members list and click the pencil icon. Each member has six fields: Photo, Initials (shown in the avatar circle when no photo is set), Member Name, Role, LinkedIn URL, and Email URL. Leaving a URL empty hides that social icon. You can add between 1 and 12 members per department.

Member editor with photo, initials, name, role and URL fields
Member editor — Photo, Initials, Name, Role, LinkedIn URL, Email URL

Step 4 — Customize the styling

Switch to the Styles tab to adjust the module's appearance. Styling is organized into three collapsible groups: Section Background, Typography, and Cards.

Styles tab groups
Styles tab — three styling groups

Section Background

Set the section Background Color, the Section Padding (top / right / bottom / left), the Border Color, and the Active Filter Chip Color highlighting the selected department chip.

Section Background settings
Section Background settings

Typography & Cards

Control font family, size, weight, and color independently for the Eyebrow, the section Heading, the Department Name, the Member Name, the Member Role, the Filter Chips, the Avatar Initials, the Meta Text (filter label, counts, badges), and the Empty State Text. Under Cards, customize the member card Background, the Corner Radius (px, 0–40), the Avatar Background, the Avatar Shape (Circle, Rounded square, or Square), the Avatar Size (px, 48–128), and the Department Icon Background.

Typography and Cards settings
Typography & Cards settings

Step 5 — Try the filter

Click Preview to see the finished directory on the page. Click a department chip to filter the groups — each chip shows its member count automatically, and selecting a department with no groups shows the empty state. Check the layout on tablet and mobile where member cards collapse from four columns to two, then one.

Finished team directory on the page with filter chips
Finished directory — click a chip to filter by department

3. Quick Reference

Trusted by manufacturers in
Aerospace Defense Medical Energy Automotive

Ready to scope your next production run?

Talk to Our Team