SR Element Card
This module renders one card with a single image, a heading, rich text description, and one CTA button or link.
The image can display as a full-width block above the copy or align left, center, or right beside it, and the card supports background color, video, border radius, and shadow styling. Pick it over bling-graphic when you need a self-contained content block with its own heading and CTA, not a pure image showcase, and pick it over the clients modules when you have one story to tell rather than a logo set.
Use cases
- Feature callout with icon cta
- Product highlight card
- Service card with image and button
- Single testimonial style block
- Content teaser card with cta
- Side-by-side image and copy block
Where it fits
- Included with: Core
- Page sections: Features, Content, Benefits
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. |
| ID | Text | Assign a ID to the module. |
| Class | Text | Assign a CLASS to the module. |
| Image | Image | |
| Image Link | Link | |
| Full Width Image | Boolean | |
| Image Align | Choice | Options: Left, Center, Right. |
| Image Height | Number | |
| Description | Rich text | |
| Lead Text | Boolean | Turn on to make the Description text larger. |
Heading Repeats: 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. |
Style tab
Change log
| Version | Change |
|---|---|
| 1.0.0 | Stardust updates release |
SR Element Button
This module renders a single button built from one CTA configuration, choosing between a HubSpot CTA object, a payment button, a plain link, or a modal trigger, with style, size, color state, and optional icon settings.
SR Element Divider
This module renders an empty spacing block with an optional horizontal rule, sized and styled by design settings for spacing, border width, style, and color.