Your HubSpot team page is a static grid of headshots. No search. No filtering. No way for a visitor to find the right person without scrolling through every card on the page. When your team is five people, that is fine. When your team is twenty or fifty, it is a broken experience that wastes your visitors' time and makes your organization look like it does not understand how directories work.
Team Directory Pro is a standalone HubSpot module that turns your team page into a real directory. Search by name, role, or department. Filter by department tabs that generate automatically from your data. Click any member to open a detail modal with their full bio, contact information, and social links. Grid or list layout. 50+ style controls. Works on any HubSpot template without a theme dependency.
Why Static Team Grids Do Not Scale
A static team grid works when your company has a handful of people. The moment you cross ten or fifteen team members, the page becomes a wall of faces that nobody wants to scroll through. Visitors looking for a specific person have to scan every card. Visitors looking for someone in a specific department have to read every role title. There is no shortcut, no search, no way to narrow down the results.
This matters because team pages are not vanity pages. They are trust pages. Prospects check your team page to see who they will be working with. Candidates check it before applying. Partners check it to find their point of contact. If those people cannot find who they are looking for in three seconds, the page has failed.
The Problem with Team Pages on HubSpot CMS
HubSpot does not ship a team directory module. Your options have been:
- Default team modules from themes. Most HubSpot themes include a basic team grid: photo, name, role, maybe a social link. No search, no filtering, no detail view. When you need to add a twentieth team member, the page becomes unusable but the module has no solution for that.
- Rich text with manual formatting. You build the team page by hand in a rich text module. It looks custom but every change means editing HTML. Adding a team member means copying a block, updating the image, changing the text, and hoping the formatting does not break. No one on your marketing team wants to maintain this.
- HubDB powered custom modules. A developer builds a team directory backed by HubDB. This is the right architecture, but it costs thousands in development time, requires a developer for structural changes, and the module only works on one portal. You cannot reuse it elsewhere.
Team Directory Pro was built because every growing company needs a team page that scales, and none of the existing approaches on HubSpot handle search, filtering, and detail views in a single module.
What Team Directory Pro Actually Does
Two layout modes
Grid layout shows photo cards in 2, 3, or 4 columns. Each card displays the member's photo, name, role, department badge, and a preview of their social links. List layout shows compact rows with circular thumbnails, name, role, and department aligned horizontally. Both layouts share the same search, filtering, and modal functionality. Grid works best for teams that want visual impact. List works best for large directories where density and scannability matter more.
Department filter tabs
Filter tabs generate automatically from the department field in your member data. If you have team members tagged as Engineering, Design, Sales, and Support, four tabs appear. Click a tab and only members in that department show. When a department has zero results from a search query, its tab hides automatically so visitors are never shown an empty filter. Tabs render as pills or underlines, both fully styleable.
Real-time search
A debounced keyword search that filters across name, role, and department simultaneously. Type "designer" and see everyone with designer in their name, role, or department. The search combines with department tabs, so you can filter to Engineering and then search for "senior" to find all senior engineers. Results update as you type with no page reload.
Bio detail modals
Click any team member and a detail modal opens with their full-size photo, rich text biography, phone number, email address, location, and up to 8 social links. The modal uses HubSpot's built-in icon picker for social platforms, so any platform HubSpot supports is available. Focus is trapped inside the modal for keyboard accessibility. Close via the X button, clicking the backdrop, or pressing Escape.
Up to 30 members per instance
Each module instance supports up to 30 team members. Each member has fields for photo, name, role, department, rich text bio, phone, email, location, and social links. If your team is larger than 30, add a second module instance on the same page. Scoped CSS ensures multiple instances do not conflict.
50+ Style Controls
Every visual element is configurable from the Style tab in the HubSpot editor:
- Colors: 17 color fields with opacity controls covering backgrounds, text, borders, hover states, filter tabs, modal overlays, and social icon colors. All accent colors inherit from your HubSpot theme by default, so the module matches your site without any configuration.
- Cards: Padding, border radius, shadow presets, hover lift effect, and image zoom on hover.
- Images: Aspect ratio options (portrait, square, landscape), object-fit control, and lazy loading built in.
- Filters: Tab style (pill or underline), active tab colors, search input styling, and filter bar spacing.
- Modal: Overlay color and opacity, modal background, close button styling, image display mode, and content padding.
- Typography: Font sizes for name, role, department, bio text, and modal headings.
- Responsive: Independent breakpoints for tablet and mobile with automatic column reduction (4 to 2 to 1).
Accessibility
Team Directory Pro is built with proper accessibility from the start. Focus-visible outlines on all interactive elements including cards, tabs, search input, and modal controls. Full keyboard navigation through the grid and list. ARIA attributes including role, aria-modal, aria-label, and aria-live for screen reader support. Focus trap inside the detail modal. Semantic HTML throughout. Lazy loaded images with proper alt text support. Team pages serve everyone who visits your site, and that includes people using assistive technology.
What You Can Build With It
- Agency team pages with department filtering across strategy, design, development, and account management teams. Grid layout with 3 columns and hover zoom on photos.
- SaaS company directories with search across engineering, product, sales, and support departments. List layout for companies with 20+ team members where scannability matters.
- Law firm attorney directories with department tabs for practice areas. Bio modals showing bar admissions, education, and case highlights.
- University faculty directories with department filtering across schools and programs. Search by name or specialization. List layout for large departments.
- Healthcare provider directories with department tabs for specialties. Bio modals showing credentials, certifications, and appointment links.
- Financial advisory team pages with advisor profiles showing certifications, AUM, and direct contact information in the bio modal.
Works on Any HubSpot Portal
Team Directory Pro is a standalone module. No theme dependency. Install it in any HubSpot CMS portal, drop it on any page template, and configure everything from the drag-and-drop editor. Multiple instances on the same page are fully isolated through scoped CSS and unique instance identifiers.
No jQuery. No external dependencies. Pure vanilla JavaScript. Fast page loads and clean Core Web Vitals because the module loads no third-party scripts and makes no external API calls.
Get Team Directory Pro
Team Directory Pro is available on the HubSpot Marketplace for $9.99. Browse all Studio Nope modules.
If your HubSpot team page is a static grid that nobody can search or filter, and you are tired of visitors scrolling past twenty headshots to find the one person they need, Team Directory Pro is the module that turns your team page into a real directory.