Docs / Cards & Grids / Team Profile Card
A carousel of team profile cards. Each card pairs a portrait photo with a name, role, bio, and a row of social links. Use it for About pages, leadership rosters, contributor grids, or any moment a page needs to put faces to the brand.
The most-used controls live here so editors can rebuild the carousel's basic shape without scrolling. Heading toggle, alignment, navigation controls, and image-to-text ratio inside each card.
Controls whether the section heading area (badge h6, title h2, description p) appears above the carousel. Turn it off when the section follows a stronger heading from the row above and you want the cards to read as a continuation.
Text alignment for the heading area on desktop (993px and above).
left Left-alignedcenter Centered (default)right Right-alignedText alignment for the heading area on mobile (below 768px). Set independently from desktop so editors can center on phones while keeping desktop left-aligned.
left Left-alignedcenter Centered (default)right Right-alignedLimits the heading width on desktop. Use 0 for no limit (heading fills the available container). Lower values produce a tighter, more focused intro block.
Shows the left/right navigation arrows on the carousel. Turn off when the section has fewer cards than fit on screen, or when you want a cleaner look that relies on swipe + dots only.
Shows the dot indicators below the carousel. Each dot represents a card; the active dot uses the active color from Arrow & Dot Style.
The image column width inside each card as a percentage of the card on desktop. The text column fills the remainder.
30 30 / 70 (narrow image, wide text)40 40 / 60 (default)50 50 / 50 (equal)60 60 / 40 (wide image, narrow text)The section heading, the entrance animation, and the repeating list of team member cards. Each card is its own row in the Team Members repeater.
The badge + title + description block above the carousel. Default markup is <h6> (rendered as a pill badge if Badge Style is enabled), <h2> for the title, and <p> for the description. Keep the h6 short (2-4 words) so the badge pill stays compact.
Triggers an IntersectionObserver-driven fade when the section scrolls into view. The fade adds a slide from the chosen direction plus opacity.
none No animation (default)bottom Fade Up (slides up from below)top Fade Down (slides down from above)left Fade from Leftright Fade from Rightfade Fade Only (no slide)Reduced motion: When a visitor has prefers-reduced-motion: reduce, the animation is skipped and the section renders fully visible.
The list of team member cards. Each row in this repeater renders one card with a photo, rich-text content block, and up to six social links. Add a row for every team member; the carousel handles scrolling automatically based on viewport width. Each row exposes the following sub-fields:
The portrait for this team member. Upload a square or 4:5 portrait at 800px or larger so the image stays sharp at full-size cards. Always set descriptive alt text (e.g. "Alex Morgan, CEO").
Tip: Use a unique filename when you replace this image; HubSpot's CDN caches by URL, so overwriting a file with the same name can leave visitors seeing the stale image for hours.
The text block for this card. Default structure is <h3> for the team member's name, a <p><strong> for the role/title, and a short <p> bio. Keep the bio to 1-2 sentences so cards stay even in height across members.
Email address for a mailto: link. Leave blank to hide the email icon for this member. Used for the envelope/email icon in the social row.
LinkedIn profile URL for this team member. The default #0 is a placeholder that renders the icon but does not navigate. Replace with the full profile URL (e.g. https://www.linkedin.com/in/alex-morgan) to enable the link.
X / Twitter profile URL. Default #0 renders the icon without a working link. Replace with the full profile URL (e.g. https://x.com/alexmorgan).
Instagram profile URL. Default #0 renders the icon without a working link. Replace with the full profile URL.
GitHub profile URL. Default #0 renders the icon without a working link. Replace with the full profile URL.
YouTube channel URL. Default #0 renders the icon without a working link. Replace with the full channel URL.
Developer hooks for adding custom CSS or JS targeting. Leave blank for most pages.
Sets an id="..." on the section element. Must be unique on the page. Useful for anchor links (e.g. #team) and JS targeting.
Additional classes (space-separated) appended to the section element's class list. Useful when applying page-specific overrides via the page's custom CSS.
Everything visual: the card shell, social icons, carousel arrows and dots, the badge, section dividers, and the row's background/width/spacing.
Controls for the card shell itself: background, padding, border radius, shadow, and how far the info card overlaps the image.
Fill color for the card surface behind the text content. Default is a near-white that reads as a subtle tile against a white page background.
Rounded corners on the card shell. 12px matches the theme's default tile rounding; 0 for hard corners, 24+ for very soft edges.
Inner padding inside the card shell. Lower values produce a denser card; higher values give the bio more room to breathe.
Adds a soft drop shadow under each card. Turn off for a flat look that relies only on the card background color.
Color + opacity of the card drop shadow. Stay under 15% opacity for tasteful shadow; above that the section starts to feel heavy.
Rounded corners on the team member photo. Matches the card radius by default; raise to 40 for a heavily rounded look that pairs well with circular crops.
Adds a drop shadow under the profile image. Combine with Card Shadow off for a "floating photo on flat card" look.
Color + opacity for the profile image's drop shadow. Keep this subtle to avoid competing with the card shadow.
How far the info card overlaps the profile image on desktop. Higher values pull the card up the image; 0 stacks them with no overlap.
Default fill color for all social icons (email, LinkedIn, X, Instagram, GitHub, YouTube).
Pixel size of each social icon. Larger sizes pair well with bigger cards; 20 or below reads as compact.
Color the social icons fade to on hover. Default is a mid-grey that signals interactivity without competing with the card.
The carousel's navigation chrome: prev/next arrow buttons and the dot indicators below.
Background fill for the circular arrow buttons. White by default so the arrows stand out against most card/page backgrounds.
Color of the chevron icon inside each arrow button.
Diameter of the circular arrow buttons. 44px is comfortable on touch devices (matches Apple HIG minimum tap target).
Fill color of the dot for the currently visible card.
Fill color of the dots for cards that are not currently active. Default is a light grey that reads as muted.
Styles the <h6> inside the section heading as a pill badge instead of a plain heading.
Background fill of the badge pill.
Border color of the badge pill. Light grey by default for a subtle outline against white backgrounds.
Text color inside the badge pill.
Decorative SVG shapes that sit at the top or bottom of the section, useful for blending into the section above or below.
Decorative shape at the top of the section. Choose a shape that matches the visual rhythm of the row above.
none No divider (default)wave-1 Wave 1 (Gentle)wave-2 Wave 2 (Sharp)wave-3 Wave 3 (Multi)wave-4 Wave 4 (Smooth)wave-5 Wave 5 (Layered)tilt Tilt (Angled)curve Curve (Arc)triangle TriangleColor of the top divider shape. Set this to match the background color of the section above so the divider reads as a transition.
Height of the top divider shape. Taller dividers create more dramatic transitions; 60px is a balanced default.
Height of the angled (tilt) divider. Only applies when the Top Divider is set to Tilt.
Mirrors the top divider horizontally. Useful when you want the wave/tilt direction to alternate between sections.
Decorative shape at the bottom of the section. Same 9 shape options as the top divider.
none No divider (default)wave-1 Wave 1 (Gentle)wave-2 Wave 2 (Sharp)wave-3 Wave 3 (Multi)wave-4 Wave 4 (Smooth)wave-5 Wave 5 (Layered)tilt Tilt (Angled)curve Curve (Arc)triangle TriangleColor of the bottom divider shape. Set this to match the background color of the section below.
Height of the bottom divider shape.
Height of the angled (tilt) divider at the bottom. Only applies when the Bottom Divider is set to Tilt.
Mirrors the bottom divider horizontally.
Puts the bottom divider behind the section content so buttons and links overlapping the divider area remain clickable.
The section's wrapping row controls: background (color, gradient, image), content width, and per-breakpoint padding.
The Background Type dropdown drives which sub-controls appear:
none No background (default; section inherits the page bg)color Solid Color - reveals Background Color pickergradient Gradient - reveals Top Color, Bottom Color, and 8 direction optionsimage Image - reveals Background Image, Size (cover/contain/original), Position (9-point), Overlay toggle, Overlay Color, Blur toggle, Blur amountNote: The "Background" group is labeled "Image, Video, Color, etc." in the editor but the current build does not include a video background option - the Background Type select only exposes none/color/gradient/image.
standard Standard (uses theme's standard container width, set in Theme Settings > Layout)slim Slim (narrower variant, also set in Theme Settings)custom Custom - reveals a Custom Width number input (600-1920px, default 1200)Padding controls for the row, set independently for desktop, tablet, and mobile. Each breakpoint exposes a top/bottom/left/right spacing input. Defaults:
desktop 100px top, 100px bottom, 0 left, 0 righttablet 60px top, 60px bottom, 0 left, 0 rightmobile 40px top, 40px bottom, 15px left, 15px right