Team Members | SaaSFlow Docs

102 settingsPagesBlog postsBlog listings

Where it is used

Teams page

Content settings

What the module says and shows. Repeaters (groups you can add items to) are marked as such.

Setting Type What it does

Eyebrow Text Small label above the heading. Leave empty to hide it.Default: OUR PEOPLE

Heading Text Wrap words in [brackets] to highlight them. Leave empty to hide it.Default: Meet the people behind [SaaSFlow]

Description Rich text Text under the heading. Leave empty to hide it.

Link text Text Link beside the heading. Leave empty to hide it.Default: View all team members

Link Link Where the link goes.

Team membersRepeater · 10 settings

Each person in the list.

Photo Image A head-and-shoulders photo, at least 400px wide. Leave empty to show their initials.

Name Text Full name.Default: Team member

Role Text Job title or team.Default: Job title

Team Text For example Leadership or Engineering. Used by the team filter tabs and shown in the profile panel.

Short bio Text Optional one or two lines under the role.

LinkedIn Link Profile address. Leave empty to hide the icon.

X (Twitter) Link Profile address. Leave empty to hide the icon.

Email Text Email address. Leave empty to hide the icon.

Profile panel detailsGroup · 6 settings

Shown in the panel that opens when the card is clicked (Profile panel on). All optional.

Location Text For example San Francisco, USA.

Joined Text For example Joined in 2019.

About Rich text A longer introduction.

ExperienceRepeater · 3 settings

Period	Text	For example 2019 – Present.Default: `2020 – Present`
Role and company	Text	For example Head of Engineering, TechCorp.Default: `Role, Company`
Description	Text	One line about the role.

EducationRepeater · 3 settings

Degree	Text	For example B.Tech in Computer Science.Default: `Degree`
School	Text	School or university.
Year	Text	For example 2012.

Interests Text Separate them with | , for example Technology | Travel | Photography.

Profile page Link Optional. Links the name and photo to a profile page.

Profile panelGroup · 1 setting

Open a profile panel when a card is clicked On/off Off: cards show only the photo, name, role and links, and aren't clickable. Use it when you don't want to share more about your people.Default: On

Team filter tabsGroup · 2 settings

Show team filter tabs	On/off	An All tab plus one tab per team, built from each member's Team field (Content > Team members > Team).Default: `Off`
All tab label	Text	First tab, showing everyone.Default: `All teams`

Style settings

In the module's Styles tab: layout, color mode, background, fonts, spacing and animation.

Setting Type What it does

LayoutGroup · 11 settings

Show members as	Choice	Grid: rows of cards. Carousel: one row that slides sideways. The cards-per-row settings below set how many show at once.Options: GridCarouselDefault: `Grid`
Cards per row on desktop	Number	Screens 1024px and wider. In a carousel: cards visible at once.Default: `6`
Cards per row on tablet	Number	Screens from 640px to 1023px.Default: `3`
Cards per row on phones	Number	Screens under 640px.Default: `2`
Cards on phones	Choice	Swipe: one row that scrolls sideways.Options: GridOne row to swipeDefault: `Grid`
Space between cards	Number	Gap between cards.Default: `20`
Show arrows	On/off	Previous and next buttons under the carousel.Default: `On`
Move on by itself	On/off	Moves every few seconds; pauses on hover, while a profile is open, and for visitors who turn off motion.Default: `Off`
Seconds per move	Number	Time between moves.Default: `5`
Header alignment	Choice	Eyebrow, heading, description and link.Options: Left, with the link on the rightCenteredDefault: `Left, with the link on the right`
Profile panel width	Number	Width of the profile panel on desktop. Phones always use the full screen.Default: `620`

Person cardGroup · 4 settings

Photo shape	Choice	Shape of each photo.Options: Rounded rectangleCircleSquare cornersDefault: `Rounded rectangle`
Photo proportions	Choice	Photos are cropped to this shape. Circle photos are always square.Options: Landscape (4:3)SquarePortrait (3:4)Default: `Landscape (4:3)`
Text alignment	Choice	Name, role and icons.Options: LeftCenteredDefault: `Left`
Social icons	Choice	Look of the LinkedIn, X and email icons.Options: Tinted squaresPlain iconsDefault: `Tinted squares`

Color mode Choice "Same as site" follows Theme settings > Color mode.Options: Same as siteLightDarkDefault: Same as site

Eyebrow style Choice "Same as theme" follows Theme settings > Eyebrow.Options: Same as themePlain textPillGradient badgeDefault: Pill

Highlight color Color Color of the link, social icons and initials. Starts as the theme's primary color.

FontsGroup · 2 settings

Heading font	Font	Starts as the theme's heading font. Change it to use another font in this module only.Default: `Outfit`
Text font	Font	Starts as the theme's body font. Change it to use another font in this module only.Default: `Inter`

Transparent background On/off Removes this section's background so the page background shows through. Useful for blending sections together.Default: Off

Background color Color Leave empty to use the theme colors for the current light or dark mode.

Background effectGroup · 6 settings

Show background glow	On/off	Default: `Off`
Intensity	Number	How strong the glow is. 0% hides it.Default: `60`
Flowing movement	On/off	Plays an entrance animation. Visitors who turn off motion on their device don't see it.Default: `On`
Fade out at the top and bottom	On/off	Fades the glow out at the edges so it blends into the next section.Default: `On`
Glow color 1	Color	Leave empty to use the theme primary color.
Glow color 2	Color	Leave empty to use the theme accent color.

Background animation Choice A subtle moving background behind this section. Soft bubbles: glass circles floating. Aurora: large blurred color clouds drifting. Dot grid: a faint dotted pattern drifting. Ripples: soft rings spreading out. Brand colors only; still for visitors who turn off motion.Options: NoneSoft bubblesAurora glowDrifting dot gridRipplesDefault: None

Animation strength Number How visible the background animation is. Lower is subtler.Default: 45

Number of bubbles Number How many bubbles float in this section. Phones show about half of them.Default: 6

Bubble arrangement Number 0: this section gets its own random arrangement. Pick any other number to shuffle the bubbles into a new one, for example if a bubble sits behind your text.Default: 0

CardsGroup · 12 settings

Card background	Color	Leave empty to use the theme card color.
Corner radius	Number	Roundness of the corners. 0 is square.Default: `16`
Show border	On/off	Draws a thin border around each card.Default: `On`
Shadow	Choice	Shadow under each card.Options: NoneSoftStrongDefault: `None`
Lift on hover	On/off	Cards rise slightly when hovered.Default: `Off`
Card media	Choice	What sits at the top of each card. Full-width image uses each card's Card image.Options: IconFull-width imageNoneDefault: `Icon`
Image style	Choice	Edge to edge fills the top of the card.Options: Edge to edgeInset, with space around itDefault: `Edge to edge`
Image shape	Choice	Every card's image is cropped to this shape.Options: Wide (16:9)Landscape (3:2)Classic (4:3)SquareDefault: `Wide (16:9)`
Icon position	Choice	Where each card's icon sits.Options: Above the textTop right cornerBeside the titleLeft of all the textDefault: `Above the text`
Icon style	Choice	The shape behind each icon.Options: Tinted squareTinted circlePlain iconDefault: `Tinted square`
Card action	Choice	What each card offers at the bottom. Uses each card's Link (and Link text or HubSpot CTA). Without a link, the arrow is just decoration and the other actions are left out.Options: NoneArrowText linkButton or HubSpot CTAWhole card is a linkWhole card is a link, with an arrowDefault: `Arrow`
Button style	Choice	Look of the card buttons.Options: PrimaryOutlineDefault: `Outline`

SpacingGroup · 4 settings

Leave empty to use the theme section spacing (Theme settings > Layout).

Top padding (desktop)	Number	Space above the content on desktop.
Bottom padding (desktop)	Number	Space below the content on desktop.
Top padding (mobile)	Number	Space above the content on phones.
Bottom padding (mobile)	Number	Space below the content on phones.

Animate when scrolled into view On/off Content fades up as the section comes into view. Visitors who turn off motion on their device see no animation.Default: On

Interface labels

Words on buttons and for screen readers. Change them to translate the module.

Setting	Type	What it does
LinkedIn link	Text	Keep {name} where the person's name goes.Default: `LinkedIn profile of {name}`
X link	Text	Keep {name} where the person's name goes.Default: `X profile of {name}`
Email link	Text	Keep {name} where the person's name goes.Default: `Email {name}`
Open profile	Text	Read by screen readers on clickable cards. Keep {name}.Default: `Open profile of {name}`
About heading	Text	Heading in the panel. Keep {first_name} where the first name goes.Default: `About {first_name}`
Experience heading	Text	Heading in the panel.Default: `Experience`
Education heading	Text	Heading in the panel.Default: `Education`
Interests heading	Text	Heading in the panel.Default: `Interests`
Close button	Text	Read by screen readers.Default: `Close`
Filter tabs	Text	Name of the tab list for screen readers.Default: `Filter by team`
Previous button	Text	Read by screen readers for the left arrow.Default: `Previous team members`
Next button	Text	Read by screen readers for the right arrow.Default: `Next team members`

Tip

Headings support [brackets] to highlight words and | for a new line. See Editing tips.