SR Cards Team 02

This module renders a two-column layout with a left-side heading, rich text description, and a CTA button next to a grid of four team member cards, each showing a photo, name, job title, and optional social icons.

Pick this over the other team card modules when you want the intro copy and call-to-action, such as a hiring link, placed alongside the team grid instead of stacked above a standalone grid. It expects square-ish headshots and looks best when all four card slots are filled.

Use cases

About us team section with hiring cta
Leadership grid with intro text
Careers page team showcase
Meet the team with join us button
Department team roster with blurb

Where it fits

Included with: Core
Page sections: Team, Content, CTA

Editable fields

Content tab

Field	Type	Notes
Background Video	File	Repeats: min 0, default 1. Add multiple file formats in order to provide compatibility with a broad range of browsers.
Background Video Tablet	File	Repeats: min 0, default 1. This background video will only be used on tablet devices.
Background Video Mobile	File	Repeats: min 0, default 1. This background video will only be used on mobile devices.
Enabled	Boolean
ID	Text	Assign a ID to the module.
Class	Text	Assign a CLASS to the module.
Description	Rich text
Lead Text	Boolean	Turn on to make the Description text larger.

Heading Repeats: min 0, default 1.

Field	Type	Notes
Heading	Text
Size	Choice	HTML heading size. Options: H1, H2, H3, H4, H5, H6, P.
Display Size	Choice	Size that heading is displayed at. 12 options, including Auto, H1, H2.
Color	Choice	13 options, including Auto, Primary, Secondary.
Color	Color
Align	Choice	Options: Auto, Left, Center, Right.
CSS Class	Text

CTA Repeats: min 0, default 1.

Field	Type	Notes
CTA Type	Choice	Options: HubSpot CTA, Button, Modal.
CTA Style	Choice	26 options, including Primary, Secondary, Tertiary.
CTA	CTA
Button Text	Text
Modal Target	Text
Link	Link
Payment link	Payment
Checkout behavior	Choice	Options: Open in a new tab, Sliding overlay.
CTA Size	Choice	Options: Small, Default, Large.
Add icon	Boolean

CTA › Default

Field	Type	Notes
Background	Color
Text	Color
Border	Color

CTA › Hover

Field	Type	Notes
Background	Color
Text	Color
Border Color	Color

CTA › Icon

Field	Type	Notes
Icon	Icon
Position	Choice	Options: Left, Right.
Purpose	Choice	The purpose of the icon, used for accessibility. If set to decorative, an additional attribute of aria-hidden="true" will be added to the icon. Options: Decorative, Semantic.

Card Repeats: min 0, default 4.

Field	Type	Notes
Team Image	Image
Team Name	Text
Team Title	Rich text

Card › Social Icons Repeats: min 0, default 0.

Field	Type	Notes
Icon	Icon
Background Color	Color
Icon Color	Color
Link	Link
Aria Label	Text	The aria-label attribute is used on links that have no accessible name to give it meaning to screen readers.
Purpose	Choice	The purpose of the icon, used for accessibility. If set to decorative, an additional attribute of aria-hidden="true" will be added to the icon. Options: Decorative, Semantic.

Style tab

Change log

Version	Change
4.0.1	Fixed social icon styles
4.0.0	Stardust update
3.2.1	Swapped team title text to richtext
3.2.0	Accessibility improvements
3.1.0	Added responsive background options
3.0.2	Added new Link options
3.0.1	Added card styles