SR Showcase 01

This module renders a heading, an optional description, and a grid of up to 9 project cards, each showing a background image and a button that opens a modal popup.

Each modal contains its own image carousel of up to 3 images, a title, rich text, an industry tag, up to 2 feature lines, and its own CTAs, plus a shared CTA button below the grid. Pick this over the bento grid, bling graphic, or clients modules when you need clickable portfolio tiles that expand into detailed case study popups rather than a plain image, slider, logo strip, or mixed-media layout.

Use cases

Portfolio showcase grid
Case study popups
Project gallery with modals
Work samples with details on click
Website showcase with industry tags
Featured projects with feature highlights

Where it fits

Included with: Core
Page sections: Gallery, Proof, 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.
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: default 1.

Field	Type	Notes
Heading	Text
Heading Size	Choice	Options: H1, H2, H3, H4, H5, H6.
Heading Display Size	Choice	11 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

Items › Card

Field	Type	Notes
Title	Text
Background	Image
Scroll	Boolean
Button Text	Text

Items › Modal

Field	Type	Notes
Image	Image	Repeats: default 3.
Title	Text
Rich Text	Rich text
Text	Text
Industry	Text	Repeats: default 1.
Text	Text
Features	Text	Repeats: default 2.

Items › Modal › CTA Repeats: min 0, max 2, default 2.

Field	Type	Notes
CTA Type	Choice	Options: HubSpot CTA, 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

Items › Modal › CTA › Default

Field	Type	Notes
Background	Color
Text	Color
Border	Color

Items › Modal › CTA › Hover

Field	Type	Notes
Background	Color
Text	Color
Border Color	Color

Items › Modal › 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.

CTA Repeats: min 0, default 1.

Field	Type	Notes
CTA Type	Choice	Options: HubSpot CTA, 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
2.0.0	Stardust update
1.2.3	Added image count check
1.2.2	Column breakpoint fix
1.2.1	More accessibility improvements
1.2.0	Accessibility improvements
1.1.0	Added responsive background options
1.0.5	Added more options to the headings
1.0.4	Added new Link options
1.0.3	Added tags to ensure the modal target is always correct
1.0.2	Added column sizing options
1.0.1	Fixed improper sized slider dots