SR Cards Team 01
This module renders a centered heading, optional rich text description, and one CTA button above a static grid of four team member cards, each showing a photo, name, job title, and an optional row of social icons.
Pick this version over its siblings when you want a simple stacked intro-then-grid layout in a static four-card format, since the visual difference from sr-cards-team-01's siblings is spacing and card styling rather than layout structure like the two-column, six-card, or carousel variants. Needs a headshot image for each of the four team members to look complete.
Use cases
- Meet the team section
- Leadership grid with four people
- About page team roster
- We are hiring callout with team photos
- Company staff introduction
Where it fits
- Included with: Stack
- 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. |
| Cards Vertical Align | Choice | Options: Left, Center, Right. |
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 | 15 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, HubSpot Payment, 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 | |
| Display Size | Choice | Size that heading is displayed at. 12 options, including Auto, H1, H2. |
| 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. |
Columns Repeats: min 1, max 4, default 1. Columns follow a twelve column grid.
| Field | Type | Notes |
|---|---|---|
| Column Breakpoint | Choice | Options: None, Mobile, Tablet, Desktop, XL. |
| Column Width | Choice | 12 options, including 1, 2, 3. |
| Column Offset | Choice | 13 options, including 0, 1, 2. |
| Column Order | Number |
Style tab
Change log
| Version | Change |
|---|---|
| 3.2.1 | Swapped team title text to richtext |
| 3.2.0 | Accessibility improvements |
| 3.1.1 | Added none column breakpoint for smaller screens |
| 3.1.0 | Added responsive background options |
| 3.0.2 | Added new Link options |
| 3.0.1 | Added card styles, Added column options |
SR Cards Steps 02
Renders a heading and rich text description above a row of step cards, each with a numbered circle joined by a connecting line, a subheading, body text, and an optional CTA button or link.
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.