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.
Choose this over SR Cards Articles 01 when you want a fixed grid with per-card column width and breakpoint control instead of carousel dots, arrows, and autoplay, and choose it over SR Cards Articles 03 when you do not need a sidebar signup form next to the posts. It falls back to placeholder articles with images when no blog or posts are found.
Use cases
- Blog post grid on homepage
- Knowledge base article listing
- Recent posts by tag
- Curated resource roundup
- Blog category landing section
Where it fits
- Included with: PRO
- Page sections: Blog, Resources, 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. |
| Manually Select posts | Boolean | |
| Blog | Blog | |
| Tag | Tag | |
| Blog Post | Page | Repeats: default 1. Select the blog post you want to display. |
| Number of Posts | Number | |
| Show Image | Boolean | |
| Blog Summary | Choice | Use the meta description option if there are issues pulling in the summary, as the summary can contain HTML and/or modules. Options: Show post's meta description, Show post's summary, Disabled. |
| Show Author | Boolean | |
| Show Tags | Boolean |
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 |
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. |
Button Repeats: min 1, max 1, default 1.
| Field | Type | Notes |
|---|---|---|
| CTA Type | Choice | Options: Button. |
| CTA Style | Choice | 26 options, including Primary, Secondary, Tertiary. |
| Button Text | Text | |
| Link | Link | |
| CTA Size | Choice | Options: Small, Default, Large. |
| Add icon | Boolean |
Button › Default
| Field | Type | Notes |
|---|---|---|
| Background | Color | |
| Text | Color | |
| Border | Color |
Button › Hover
| Field | Type | Notes |
|---|---|---|
| Background | Color | |
| Text | Color | |
| Border Color | Color |
Button › 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 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. |
Style tab
Change log
| Version | Change |
|---|---|
| 3.0.2 | Fixed author link issue |
| 3.0.1 | Fixed read more CTA link |
| 3.0.0 | Stardust update |
| 2.2.2 | Fixed manual post selection |
| 2.2.1 | Added manually select posts option |
| 2.2.0 | Accessibility improvements |
| 2.1.1 | Added none column breakpoint for smaller screens |
| 2.1.0 | Added responsive background options |
| 2.0.8 | Added option to use post meta description |
| 2.0.7 | Fixed issue with post_body |
| 2.0.6 | Added new Link options |
| 2.0.5 | Added card style fields |
| 2.0.4 | Module improvements |
| 2.0.3 | Minor Fixes |
| 2.0.2 | Added a tag option |
| 2.0.1 | Fixed Modal CTA link |
SR Cards Articles 01
Renders a heading and optional description above a carousel of blog post cards, each showing a featured image, title, author avatar and name, summary or meta text, and a Read More button.
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.