SR Cards Grid 02

Renders an optional heading and description above a grid of up to six cards, each with an image, its own heading, body text and any number of buttons.

Pick this over SR Cards Grid 01 when the cards need photos or icons and may carry more than one CTA, since Grid 01 is text-only with a single button and caps at five cards. Supply an image for every card since the image block only appears when one is set, leaving it off on some cards will make the grid look uneven.

Use cases

Product showcase grid
Service overview with icons
Feature grid with images and ctas
Team offerings with photos
Six-card benefits layout
Image-led inventory listing

Where it fits

Included with: Core
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

Cards Repeats: min 1, default 6.

Field	Type	Notes
Image	Image	Recommended size: 150x150px.
Text	Rich text
Lead Text	Boolean	Turn on to make the Description text larger.
Background Color	Color
Align	Choice	Options: Auto, Left, Center, Right.

Cards › 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

Cards › 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

Cards › CTA › Default

Field	Type	Notes
Background	Color
Text	Color
Border	Color

Cards › CTA › Hover

Field	Type	Notes
Background	Color
Text	Color
Border Color	Color

Cards › 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.

Columns 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
4.0.2	Synced current Stardust module source
4.0.1	Minor css fixes
4.0.0	Stardust update
3.2.1	Fixed background color bug
3.2.0	Accessibility improvements
3.1.1	Added none column breakpoint for smaller screens
3.1.0	Added responsive background options
3.0.2	Added text align option to each card
3.0.1	Added new Link options
3.0.0	Added card styles