Getting Started
Team Directory Pro is a standalone HubSpot module — no theme required. Drag it into any page template to build a comprehensive, filterable team directory with search, department categorization, and detailed bio modals.
Installation
- After purchase, the module appears in your Design Manager under marketplace-modules/Team Directory Pro.module.
- Open any page in the Page Editor or add it to a template in the Design Manager.
- Drag Team Directory Pro from the module list into your page.
- The module renders with 6 default team members across 3 departments — replace them with your own team.
Content Structure
Team members are added as a repeater group. Each member has personal details, contact information, and social links.
Member Fields
- Photo — Headshot image. Falls back to a placeholder portrait if not set.
- Name — Full name displayed on card and in modal.
- Role / Job Title — Position title shown below the name.
- Department — Department or team name. Drives the auto-generated filter tabs.
- Bio — Rich text biography shown only in the modal. Supports headings, lists, links, and formatting.
- Phone — Optional phone number. Shown in modal with a click-to-call link.
- Email — Optional email address. Shown in modal with a mailto link.
- Location / Office — Optional location text (city, office name, etc.). Shown in modal and in list layout rows.
Social Links
Each member has a nested repeater for social links (up to 8 per person). Each link has:
- Icon — HubSpot icon picker. Choose from hundreds of icons (LinkedIn, Twitter/X, GitHub, Dribbble, Instagram, Facebook, YouTube, TikTok, etc.).
- URL — The social profile or website URL.
Social icons appear in the member’s modal view. The icon picker supports any icon from HubSpot’s built-in icon library — not limited to social platforms.
Settings
- Show Search — Toggle the search input on/off.
- Show Department Filters — Toggle department filter tabs on/off.
- Show “All” Tab — Toggle the “All” filter tab. Only visible when filters are enabled.
Layout Options
Grid Layout
Displays team members as photo cards in a 2/3/4 column grid. Each card shows the member’s photo, name, role, and department badge. Click any card to open the detail modal. Grid automatically collapses to 2 columns on tablet and 1 column on mobile.
List Layout
Compact horizontal rows with a circular photo thumbnail, name, role, department badge, and location. Ideal for larger teams where space efficiency matters. Click any row to open the detail modal. On mobile, rows stack with the department badge moving below.
Detail Modal
Clicking any team member opens a centered modal overlay with their full profile:
- Large photo alongside their details (side-by-side on desktop, stacked on mobile).
- Name, role, and department badge.
- Full rich text biography.
- Contact information (phone, email, location) with clickable links.
- Social media icon links.
Close the modal by clicking the X button, clicking the overlay backdrop, or pressing Escape.
Filters & Search
The toolbar sits above the team grid/list and includes department filter tabs and a search input.
- Department Filters — Auto-generated from the unique department values across all team members. Click a tab to show only members from that department. Two visual styles available: Pills (rounded buttons with borders) or Underline (minimal text with active bottom border).
- Search — Real-time text search across name, role, and department. Filters results as you type.
- Combined Filtering — Search and department filters work together. Both conditions must match for a member to appear.
- No Results State — When no members match, a “No team members found” message appears.
Style System
Every visual property is customizable from the Style tab — no CSS needed. Controls are organized into logical groups:
Container
- Max Width — Maximum section width in pixels. Set to 0 for full width.
- Horizontal Padding — Left/right padding inside the section.
Colors (17 controls)
- Background — Section background with opacity control. Set opacity to 0 for transparent.
- Card Background & Border — Card/row fill and border colors.
- Name, Role, Department — Individual text colors for each element.
- Social Icon & Hover — Default and hover colors for social link icons.
- Search Background, Text, Placeholder — Full control over search input appearance.
- Filter Active & Text — Colors for filter tab states.
- Modal Background, Overlay, Text, Secondary Text — Complete modal color customization.
Department, social hover, and filter active colors inherit from the theme’s primary accent color by default, making the module blend with any theme automatically.
Typography
- Name Font Size — Size for member names on cards/rows.
- Role Font Size — Size for role/title text.
- Department Font Size — Size for department badges.
Layout
- Layout Style — Grid or List.
- Columns — 2, 3, or 4 columns (grid only).
- Gap — Space between cards or rows.
Image
- Aspect Ratio — Portrait (3:4) or Square (1:1).
- Border Radius — Rounded corners on images.
- Max Height — Cap image height. Set to 0 for no limit.
- Hover Zoom — Subtle scale effect on card hover.
Search & Filters
- Filter Style — Pills (bordered buttons) or Underline (minimal text).
- Search Border Radius — Corner rounding for the search input.
- Filter Gap — Spacing between filter tabs.
Card
- Padding — Internal card padding. Set to 0 for edge-to-edge images.
- Border Radius — Card corner rounding.
- Box Shadow — None, Small, Medium, Large, or Extra Large.
- Shadow Color — Shadow tint with opacity control.
Modal
- Border Radius — Modal corner rounding.
- Max Width — Maximum modal width.
- Padding — Internal modal padding.
Spacing
- Padding Top / Bottom — Section-level vertical spacing.
Responsive
- Tablet Breakpoint — Width where grid collapses to 2 columns.
- Mobile Breakpoint — Width where grid collapses to 1 column.
Accessibility
- Keyboard navigation — Cards are focusable with Tab. Open modals with Enter or Space. Close with Escape.
- Focus trap — Tab/Shift+Tab cycle within the open modal.
- Focus management — Focus moves to close button on modal open, returns to triggering card on close.
- Focus-visible — Visible outlines on all interactive elements for keyboard users.
- ARIA —
role="dialog", aria-modal, aria-hidden, aria-label, aria-selected, and aria-live for screen reader support.
- Semantic HTML — Proper
<section>, <button>, <input> elements throughout.
- Lazy loading — All images use
loading="lazy".
Tips
- Consistent photos — Use photos with the same aspect ratio and similar framing for a cohesive look. Portrait (3:4) works best for headshots.
- Department naming — Keep department names concise (e.g., “Design” not “Design & Creative Services”). They appear as filter tabs and badges.
- Write good bios — 2-3 paragraphs that highlight expertise, background, and personality. This is the main content in the modal.
- Test the modal — Preview your page and click each member to verify photos, bios, contact info, and social links display correctly.
- Large teams — For 15+ members, consider the List layout for better density. The module supports up to 30 members.
- Dark mode — Set dark backgrounds, switch text colors to light values, and adjust the modal overlay opacity. Demo 1 above shows a complete dark theme setup.
- Social icons — The icon picker supports hundreds of icons beyond social media — use them for phone, website, calendar links, or anything else.
- Card padding — Set Card Padding to 0 for edge-to-edge photos (minimal look) or 12-16px for a framed card appearance.
