SR Cards Articles 03
This module renders a heading and description above a two-column layout, with a list of blog article cards on one side showing featured image, meta or summary text, author, tag, and a read more button, and a form panel on the other side with its own heading, description, image, and HubSpot form.
Pick this over SR Cards Articles 01 and 02 when the section needs a lead capture form or newsletter signup sitting beside the article list rather than a full-width grid or carousel of posts. It expects a connected blog or tag to pull posts from and a HubSpot form for the sidebar, otherwise placeholder articles and an empty form panel display.
Use cases
- Blog list with newsletter signup sidebar
- Articles paired with lead capture form
- Content offer next to recent posts
- Resource hub with subscribe form
- Blog page with gated content form
Where it fits
- Included with: PRO
- Page sections: Blog, Form, 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. |
| Blog | Blog | |
| Tag | Tag | |
| Number of Posts | Number | |
| Number of Tags | Number | The number of tags to display. Tags are automatically taken from the blog. |
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 | 13 options, including Auto, Primary, Secondary. |
| Color | Color | |
| Align | Choice | Options: Auto, Left, Center, Right. |
| CSS Class | Text |
Post Card Settings
| Field | Type | Notes |
|---|---|---|
| Show Featured Image | Boolean | |
| Blog Summary | Choice | Options: Show post's meta description, Show post's summary, Disabled. |
| Show Author | Boolean | |
| Show Post Tag | Boolean |
Post Card Settings › Heading Size
| Field | Type | Notes |
|---|---|---|
| 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. |
| Class | Text |
Post Card Settings › Read More Button Repeats: min 1, max 1, default 1.
| Field | Type | Notes |
|---|---|---|
| CTA Type | Choice | Options: Button. |
| CTA Style | Choice | 24 options, including Primary, Secondary, Tertiary. |
| Button Text | Text | |
| Link | Link | |
| CTA Size | Choice | Options: Small, Default, Large. |
| Add icon | Boolean |
Post Card Settings › Read More Button › Default
| Field | Type | Notes |
|---|---|---|
| Background | Color | |
| Text | Color | |
| Border | Color |
Post Card Settings › Read More Button › Hover
| Field | Type | Notes |
|---|---|---|
| Background | Color | |
| Text | Color | |
| Border Color | Color |
Post Card Settings › Read More Button › Icon
| Field | Type | Notes |
|---|---|---|
| Icon | Icon | |
| Position | Choice | Options: Left, Right. |
Post Card Settings › Card 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. |
Form
| Field | Type | Notes |
|---|---|---|
| Enabled | Boolean | |
| Lazy Load | Boolean | To use this feature, you must have either Marketing Hub or Content Hub Professional or Enterprise, and you need to enable the "Set as raw HTML" option in the form settings. |
| Sticky | Boolean | To use this feature, you must have either Marketing Hub or Content Hub Professional or Enterprise, and you need to enable the "Set as raw HTML" option in the form settings. |
| Form Height | Number | Used to set a minimum height for the form, this prevents layout shifts when the form loads. |
| Image | Image | |
| Description | Rich text | |
| Lead Text | Boolean | Turn on to make the Description text larger. |
| Form | Form | |
| Send form notifications to specified email addresses instead of the form defaults | Boolean | |
| Email Addresses | ||
| Salesforce campaign | Salesforcecampaign |
Form › Styles
| Field | Type | Notes |
|---|---|---|
| Background Color | Color | |
| Text Color | Choice | Set to Auto to use the default text color. Set to Custom to set a custom text color. 13 options, including Auto, Primary, Secondary. |
| Text Color | Color | |
| Hide Field Labels | Boolean |
Form › Styles › Button
| Field | Type | Notes |
|---|---|---|
| Style | Choice | 24 options, including Primary, Secondary, Tertiary. |
| Size | Choice | Options: Small, Default, Large. |
| Align | Choice | Options: Auto, Left, Center, Right. |
| Full Width | Boolean |
Form › Styles › Button › Default
| Field | Type | Notes |
|---|---|---|
| Background | Color | |
| Text | Color | |
| Border | Color |
Form › Styles › Button › Hover
| Field | Type | Notes |
|---|---|---|
| Background | Color | |
| Text | Color | |
| Border Color | Color |
Form › Styles › Padding
| Field | Type | Notes |
|---|---|---|
| Top | Number | |
| Bottom | Number | |
| Left | Number | |
| Right | Number |
Form › Styles › Border
| Field | Type | Notes |
|---|---|---|
| Style | Choice | Options: None, Solid, Dotted, Dashed, Double. |
| Color | Color | |
| Width | Number | |
| Radius | Number | |
| Top | Boolean | |
| Bottom | Boolean | |
| Left | Boolean | |
| Right | Boolean |
Form › Styles › Shadow
| Field | Type | Notes |
|---|---|---|
| Shadow | Boolean | |
| Horizontal | Number | A positive value puts the shadow on the right side of the box, a negative value puts the shadow on the left side of the box. |
| Vertical | Number | The vertical offset of the shadow. A positive value puts the shadow below the box, a negative value puts the shadow above the box. |
| Blur | Number | The blur radius. The higher the number, the more blurred the shadow will be. |
| Spread | Number | The spread radius. A positive value increases the size of the shadow, a negative value decreases the size of the shadow. |
| Inset | Boolean | Changes the shadow to an inner shadow. |
| Color | Color | The color of the shadow. |
Form › Heading Repeats: min 0, default 1.
| Field | Type | Notes |
|---|---|---|
| Heading | Text | |
| Heading Size | Choice | HTML heading size. Options: H1, H2, H3, H4, H5, H6, P. |
| Heading Display Size | Choice | Size that heading is displayed at. 12 options, including Auto, H1, H2. |
| Heading Color | Choice | 13 options, including Auto, Primary, Secondary. |
| Heading Color | Color | |
| Heading Align | Choice | Options: Auto, Left, Center, Right. |
| CSS Class | Text |
Column Size › Articles 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. |
| Grid Width | Choice | 12 options, including 1, 2, 3. |
| Column Offset | Choice | 13 options, including 0, 1, 2. |
| Column Order | Number |
Column Size › Form 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 |
Design Settings › Filter Button Style › Default
| Field | Type | Notes |
|---|---|---|
| Spacing | Spacing | |
| Background | Color | |
| Text | Color | |
| Border | Color |
Design Settings › Filter Button Style › Hover
| Field | Type | Notes |
|---|---|---|
| Background | Color | |
| Text | Color | |
| Border Color | Color |
Style tab
Change log
| Version | Change |
|---|---|
| 2.0.0 | Stardust update |
| 1.1.6 | Fixed filter button styles |
| 1.1.5 | Added fields for filter button styles |
| 1.1.4 | Fixed blog tags filter |
| 1.1.3 | Added ability to use new HS form |
| 1.1.2 | Column breakpoint fix |
| 1.1.1 | Fix for disabled form |
| 1.1.0 | Accessibility improvements |
| 1.0.1 | Fixed cards to be filtered on more than 1 tag |
SR Cards Articles 02
This module renders a heading with optional description and CTA buttons above a static grid of blog post cards pulled from a HubSpot blog or tag, or picked manually, each card showing a featured image, meta or summary text, author, tag, and a Read More link.
SR Cards Categories 01
Renders a heading and richtext intro above a row of up to 9 text-only cards, each with its own heading, description, and link, laid out in 1, 2, 3, or 4 columns with adjustable column alignment.