SR Two Col Features 01
Renders an optional heading and description above a grid of feature cards, each with an image, a swap-on-hover image, a heading, rich text, and an optional link.
Column width, breakpoint, offset and order are set per card, so pick this over Two Col Features 02 when you need a repeating grid of individually linked cards rather than a single shared media block with a text list. Add images to each card for the hover swap to work, and set a url per card if you want the cards to act as navigation into deeper pages.
Use cases
- Product feature grid with hover images
- Linked feature cards to product pages
- Icon-free feature showcase with photos
- Service overview grid
- Three or four card feature comparison
- Clickable feature tiles
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. |
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 |
Features Repeats: min 1, default 1.
| Field | Type | Notes |
|---|---|---|
| Feature Image | Image | Recommended size: 120x120px. |
| Feature Image Hover | Image | Recommended size: 120x120px. |
| Feature Heading | Text | |
| Feature Content | Rich text | |
| Feature URL | Link |
Column Size Repeats: min 1, max 4, default 3. 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.0.2 | Added text color options |
| 3.0.1 | Added padding to the module on mobile |
| 3.0.0 | Stardust update |
| 2.2.0 | Accessibility improvements |
| 2.1.0 | Added responsive background options |
| 2.0.2 | Added new Link options |
| 2.0.1 | Added FontAwesome CSS |
SR Two Col 10
This module renders a full-height media column (image or video) beside a content column that holds a heading, rich text description, and one CTA button, with the media side switchable to left or right.
SR Two Col Features 02
Renders a heading and rich text description above a two column section, with one shared media block (image, video, form, or lottie) on one side and a stacked list of up to six feature items on the other, each item having an icon or image, a heading, and rich text.