SR Cards Testimonial Grid 02
This module renders an optional heading and description above a grid of three testimonial cards, each showing a team photo, quote text, name, title, and an optional CTA button below the grid.
Pick this over Testimonial Grid 01 when you want the alternate card styling and background image treatment for the photo rather than the icon-above-quote layout of the sibling module. Each card requires a team headshot image, and the layout is fixed at three cards rather than the up-to-five flexible count in Testimonial Grid 01.
Use cases
- Customer testimonial showcase
- Three-person quote grid
- Team member endorsements
- Client success stories with photos
- Social proof section with cta
Where it fits
- Included with: Core
- Page sections: Testimonials, Proof, Team
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 |
Card Repeats: default 3.
| Field | Type | Notes |
|---|---|---|
| Card Image | Image | |
| Card Content | Rich text | |
| Card Name | Text | |
| Card Title | 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. |
Style tab
Change log
| Version | Change |
|---|---|
| 3.0.0 | Stardust update |
| 2.2.0 | Accessibility improvements |
| 2.1.0 | Added responsive background options |
| 2.1.0 | Fixed description typo |
| 2.0.3 | Spacing and columns fix |
| 2.0.2 | Added new Link options |
| 2.0.1 | Added card style fields |
SR Cards Testimonial Grid 01
This module renders a heading, optional description text, and a grid of up to five testimonial cards, each with an icon or small svg above a quote, an author photo, name, and title.
SR Cards Testimonial Slider 01
This module renders a heading, optional rich text description, and a slider of up to six individual testimonial cards on a plain background, each with an optional icon, a rich text quote, and an author name, title, and photo.