SR Event Listing 01
Renders a heading and description above a row of up to three event or trip cards, each with an image, a length field, location, a regular price and struck-through promo price, a star rating, a subheading, body text, and a details button.
Pick this over the other card modules when you need bookable or scheduled offerings with trip-style pricing fields like duration and destination alongside a rating, rather than blog posts, categories, logos, or generic feature cards. It expects an image for each column and works best for a small fixed set of three or fewer listings rather than a dynamically pulled blog feed.
Use cases
- Guided tour packages
- Multi-day event listings
- Workshop or retreat pricing cards
- Travel itinerary comparison
- Limited-time promo pricing with star ratings
Where it fits
- Included with: Stack
- Page sections: Events, Pricing, Features
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. |
| Column Vertical Align | Choice | Options: Auto, Top, Center, Bottom, Stretch. |
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 |
Column Repeats: default 3.
| Field | Type | Notes |
|---|---|---|
| Image | Image | |
| Image Corner Radius | Number | |
| Image Link | Link | |
| Length | Text | |
| Location | Text | |
| Price | Text | |
| Promo Price | Text | |
| Content | Rich text | |
| Lead Text | Boolean | Turn on to make the content text larger. |
| Text Align | Choice | Options: Auto, Left, Center, Right. |
| Text Color | Choice | 14 options, including Auto, Primary, Secondary. |
| Custom Column Size | Boolean | |
| CSS Class | Text | Assign a CLASS to the column. |
Column › Stars
| Field | Type | Notes |
|---|---|---|
| Stars | Number | |
| Color | Color |
Column › 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 |
Column › 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 |
Column › CTA › Default
| Field | Type | Notes |
|---|---|---|
| Background | Color | |
| Text | Color | |
| Border | Color |
Column › CTA › Hover
| Field | Type | Notes |
|---|---|---|
| Background | Color | |
| Text | Color | |
| Border Color | Color |
Column › 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. |
Column › Column Size 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 |
|---|---|
| 2.0.1 | Fixed column text color bug |
| 2.0.0 | Stardust update |
| 1.2.1 | Column breakpoint fix |
| 1.2.0 | Accessibility improvements |
| 1.1.0 | Added responsive background options |
| 1.0.0 | Added module |
SR Event Details 01
This module renders a single listing page with a heading, description, and a large featured image overlaid with metadata such as length, location, star rating, and price.
SR Events 01
This module renders a heading with description above a row of up to three event cards, each with its own subheading, a start date and time, an optional end date, and a link to register or learn more.