SR Three Col Features 01
This module renders a heading and description above a row of three columns, each built from a repeater of up to 4 items with an icon (plus optional hover icon), a title, a rich text description, and its own link.
Pick it over sr-three-col-02 and sr-three-col-03 when items are simple icon-plus-text entries with a single link each rather than columns needing photos, video, embedded forms, or stacked mini feature lists. There is no module-level CTA button, so put any click-through on the item links, and supply icon images since the layout is built around them rather than photography.
Use cases
- Three-column icon feature grid
- Product capability list with icons
- Service highlights with links
- Toolkit or feature overview section
- Icon cards linking to detail pages
Where it fits
- Included with: Stack
- Page sections: Features, Benefits, Content
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. |
| Feature Image | Image | This is the center image. |
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 |
Items Repeats: min 2, max 4, default 4.
| Field | Type | Notes |
|---|---|---|
| Icon | Image | Recommended size: 160x160px. |
| Icon Hover | Image | Recommended size: 160x160px. |
| Image on Hover | Image | Image to show in the phone on hover - Recommended size: 1125x2436px. |
| Title | Text | |
| Description | Rich text | |
| Link | Link |
CTA Repeats: min 0, default 0.
| 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. |
Style tab
Change log
| Version | Change |
|---|---|
| 3.0.0 | Stardust update |
| 2.3.0 | Accessibility improvements |
| 2.2.0 | Added responsive background options |
| 2.1.1 | Added new Link options |
| 2.1.0 | Removed jQuery |
| 2.0.2 | Center image is editable and can be removed or replaced. |
SR Three Col 03
Renders an optional heading and description above a row of columns, where each column combines one media slot (image, video, form, meeting scheduler, or lottie), a subheading, rich text, a repeatable list of icon-led feature items, and a CTA button or link.
SR Two Col 01
This module renders a shared heading and description above two equal-width columns, each with its own media slot (image, video, embedded form, or lottie animation), a sub-heading, rich text body, an optional feature list, and one CTA button.