Team¶
A responsive grid of team-member cards: photo, name, designation, optional department, short bio, and social links. Best for: "Meet the team", leadership and staff sections, and about-us people grids.
📷 Hero image
Target file: assets/img/team/hero.webp
A responsive grid of team-member cards, three across at desktop width on a Light background. Each card shows a photo at the top, then the member name in a bold Dark heading, a Primary-colored designation line, and a short bio. A small row of social icons in the Primary color sits at the bottom of each card. Captured at desktop width.
At a glance¶
People Grid Cards
- What it does: renders a column-based grid (set per breakpoint) of team members. Each member shows a photo, name, and designation, plus optional department, short bio, and social icons. Members can be wrapped in styled cards.
- Best used for: a "meet the team" section, a leadership lineup, or a staff directory with photos and roles.
- Not the right fit if: you want open roles rather than people (use Job Listing) or single-quote highlights (use Testimonial Grid).
- 🔗 Live demo: (add demo link)
Add it to your page¶
- In the page editor, click Add and search for Team.
- Drag it where your people section should sit.
- Open Content › Team members and add a member: upload a Member image, set the Member name and Member designation.
- Optionally turn on Show member department, Show member bio, and Show social media icon, then pick a Choose icon source.
- Duplicate the member item to add more people.
- In Style › Layout settings, set Columns per breakpoint, and use the Card group if you want wrapped cards.
Design recipes¶
Each recipe is a look plus the exact fields to reproduce it.
Photo, name, and designation, no card.
📷 Result
Target file: recipe-simple-grid-default.webp
Three members in a row with square-cornered photos, names, and designations, no card border or background. Clean and minimal on a Light background.
| Field | Set to |
|---|---|
| Card › Make a card | off |
| Layout › Columns › Desktop | 3 |
| Member photo › Round corner | round-0 |
Bordered, shadowed, padded cards.
📷 Result
Target file: recipe-card-style.webp
Each member wrapped in a padded card with a visible border, a soft regular shadow, and medium-rounded corners. Cards lift off the Light background as distinct panels.
| Field | Set to |
|---|---|
| Card › Make a card | on |
| Card › Border › Show border | on |
| Card › Shadow › Card shadow | regular-shadow |
| Card › Round corner › Card round corner | round-m |
Round member photos.
📷 Result
Target file: recipe-circle-avatars.webp
Members shown with perfectly circular avatar photos above each name and designation, giving a friendly, consistent headshot look.
| Field | Set to |
|---|---|
| Member photo › Width of member photo | custom-height-and-width |
| Member photo › Round corner | round-100 (Circle) |
Photo, name, role, department, bio, and social icons.
📷 Result
Target file: recipe-rich-profile.webp
A full profile card showing the photo, name, designation, a muted department label, a short bio paragraph, and a row of Primary-colored social icons at the bottom.
| Field | Set to |
|---|---|
| Content › Show member department | on |
| Content › Show member bio | on |
| Content › Show social media icon | on |
| Social media icon › Icon scale [on hover] | your zoom |
"I want to..." quick reference¶
| Goal | Setting |
|---|---|
| Circular avatars | Member photo › Round corner = round-100 |
| Cards with shadow | Card › Make a card + Shadow |
| Show social links | Content › Show social media icon (+ icon source) |
| Use custom social icons | Choose icon source = add_svg_code |
| Add a short bio | Content › Show member bio |
| Tint the no-photo placeholder | Member photo › Placeholder image (background + color) |
| 4-up / 2-up / 1-up | Layout › Columns = 4 / 2 / 1 |
| Social icon grows on hover | Social media icon › Icon scale [on hover] |
| Edge-to-edge member photo | Card › Card padding › Spacing applied on |
| Muted department text | Member department › Opacity |
Field reference¶
The editor is organized into a Content tab and a Style tab. Full field lists are grouped exactly as they appear in HubSpot. (203 fields total - expand each group as needed.)
Content tab¶
Section background settings
Background Type: none / color / image / video. Image and video reveal an upload field; overlay, position, blur, parallax, and dual radial glow live on the Style tab.
Click to update content
| Field | Type | Default |
|---|---|---|
| Add department / team | boolean | off |
| Add short bio | boolean | off |
| Add social media icons | boolean | off |
| Choose icon source | hubspot_icon_library / add_svg_code | hubspot_icon_library |
| Team members (repeater) | image, name, designation, department, bio, social icons | - |
Each member's social icons repeat with an icon (or SVG code) plus a link. Use stroke-based SVGs so the stroke inherits the icon color.
Drag to section name & Developer use only
- Section name: sets this section's ID for scroll-to-section links.
- Add custom css here: per-module CSS injection.
Style tab¶
Color scheme
| Field | Options | Default |
|---|---|---|
| Color scheme | light / dark | light |
Drives the section's surface and text tokens. Set the background Type to none (shown as "Default (scheme)") to let the scheme supply the background colour.
Section background settings
Color: Primary, Secondary, Tertiary, Light, Dark, White, Black, White transparent, or a custom color or custom gradient (default bg-light). Image and video overlay (none / solid / gradient, plus a custom overlay color or gradient) and position, optional blur, optional parallax (scale + speed), and two independent radial glows (color, position, size, opacity).
Section divider settings
Divider type: none / shape / border / shadow.
- Border divider: from top/bottom/both, width, color (default Tertiary).
- Shadow divider: regular/light/dark/custom with x/y/blur/spread/color.
- Shape divider: 25 shapes, top/bottom/both, flip/invert, color or gradient, responsive heights.
Section spacing settings
| Field | Options | Default |
|---|---|---|
| Top | top-y-0 to top-4xl | top-xl |
| Bottom | bottom-y-0 to bottom-4xl | bottom-xl |
| Left | left-x-0 / left-m / left-l / left-xl | left-m |
| Right | right-x-0 / right-m / right-l / right-xl | right-m |
Top and Bottom also accept custom, which reveals Custom top / Custom bottom number fields for desktop, tablet, and mobile (defaults 80 / 60 / 40).
Layout settings
| Field | Options | Default |
|---|---|---|
| Columns [large / medium / small] | number | 3 / 2 / 1 |
| Gap between column [large / medium / small] | number | 24 |
| Section wrapper container | default / full-width / 8 presets 384px to 1152px / custom + block alignment | default |
| Inner content container | none / full_width / 8 presets 384px to 1152px / custom + alignment | none |
Card
| Field | Options | Default |
|---|---|---|
| Alignment › Content alignment | left / right / center | left |
| Make a card | boolean | off |
| Make card same height | boolean | off |
| Background | none / tokens / gradient / custom + optional blur | none |
| Border › Show border | boolean + width + color | off |
| Card padding [large / medium / small] | spacing | 24px all |
| Make photo full-bleed (edge-to-edge) | boolean | off |
| Shadow › Card shadow | shadow-none / regular / light / dark | shadow-none |
| Round corner › Card round corner | round-0 to round-xxl | round-s |
Background, border, padding, shadow, and round corner only apply when Make a card is on.
Make card same height stretches every card to fill its row and pins the social icons to the bottom, so cards with different bio lengths still line up.
Preset Settings - Member photo
| Field | Options | Default |
|---|---|---|
| Width of member photo | 9 aspect ratios / full-width-fixed-height / custom | full-width-and-fix-height |
| Photo position | object-center / top / bottom / left / right | object-center |
| Fix height [desktop / tablet / mobile] | number | 200 |
| Width and height [desktop / tablet / mobile] | number | 150 / 150 / 100 |
| Round corner | round-0 to round-xxl / round-100 / custom | round-0 |
| Shadow | no-shadow / light / regular / dark | no-shadow |
| Spacing under element | Default / 0 / S / M / L / XL / 2XL / 3XL / 4XL | Default |
| Placeholder image | background color + icon color | custom |
The placeholder shows when a member has no image.
Preset Settings - Text (name / designation / department / bio)
| Field | Options | Default |
|---|---|---|
| Member name › Show member name as | h1 to h6 / typo-1 / typo-2 | h6 |
| Member designation › Show as | h1 to h6 / p / typo | h6 |
| Member designation › Text transform | uppercase / lowercase / capitalize / as it is | as it is |
| Member department › Show as | h4 to h6 / typo / p / custom_size | p |
| Member department › Opacity | number (100 = solid) | 70 |
| Member department › Text transform | uppercase / lowercase / capitalize / as it is | uppercase |
| Member bio › Show member bio as | typo-1 / typo-2 / default / custom_size | default |
Each text group carries its own color token and spacing under element.
Preset Settings - Social media icon
| Field | Options | Default |
|---|---|---|
| Icon color | token colors / custom | Primary |
| Icon background color | none / tokens / gradient / custom | none |
| Border › Show border | boolean + width + color | off |
| Spacing around icon | number | 0 |
| Icon width height [desktop / mobile] | number | 24 |
| Gap between icons | gap-0 to gap-4xl | gap-m |
| Icon scale [on hover] | number (1 = no zoom) | 1.05 |
| Icon background round corner | round-s to round-xxl / round-100 / custom | round-100 |
Tips & gotchas¶
Circle avatars in one step
Set Member photo › Round corner to round-100 (Circle) and pick a square photo size for clean, consistent avatars.
Card styling needs the card on
Background, border, padding, shadow, and round corner in the Card group do nothing until Make a card is turned on.
Hover zoom is front-end only
Icon scale [on hover] shows on the live page, not in the editor preview. Publish and hover to check it.
Frequently asked questions¶
How many team members can I add?
There's no limit. Team members is an open repeater, so you can duplicate the item as many times as your grid needs.
Can I hide the bio or department for just one member, not all of them?
Yes. Show member bio and Show member department are switches for the whole module, but each member's Member bio and Member department fields are optional too. Leave one blank on a specific member and that element is skipped for them, even with the switch on.
Can I link each team member to their own profile page?
Not directly. There's no link field on the member item itself, only on each social icon. If you need clickable profiles, wrap the module in a section that links out, or use Content Card instead, which supports a card-level link.
What happens if I don't upload a photo for a member?
Nothing renders in that spot, unless Add placeholder image is on. With it on, a generic person icon fills the space using the Placeholder image background and icon color.
Can I use my own icons instead of HubSpot's icon library for social links?
Yes. Set Choose icon source to Add svg code and paste an SVG into each social item instead of picking from the icon library. Use stroke-based SVGs so the color follows Icon color.
Does 'Make card same height' do anything if cards are off?
No. Make card same height, along with the rest of the Card group's background, border, padding, and shadow controls, only has an effect once Make a card is turned on.
Related modules¶
- Job Listing: the same grid pattern for open roles instead of people.
- Testimonial Grid: a grid of customer quotes with avatars.
- Content Card: flexible cards when you need more than a person profile.