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 Add department / team, Add short bio, and Add social media icons, 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 › Large screen | 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 › Add department / team | on |
| Content › Add short bio | on |
| Content › Add social media icons | 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 › Add social media icons (+ icon source) |
| Use custom social icons | Choose icon source = add_svg_code |
| Add a short bio | Content › Add short 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 › Make photo full-bleed |
| 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 / gradient token, image and video overlay style (none / bg-overlay-1 to 6) 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-l |
| Bottom | bottom-y-0 to bottom-4xl | bottom-l |
| 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 / custom + block alignment | default |
| Inner content container | none / full_width / custom + alignment | none |
Card
| Field | Options | Default |
|---|---|---|
| Alignment › Content alignment | left / right / center | left |
| Make a card | 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.
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 | sb-0 to sb-4xl | sb-xl |
| 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 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 / none | 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.
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.