SR Case Studies Slider 02

This module renders a heading and description above a slider of case study cards, defaulting to 3 slides, each with a decorative icon, an image, rich text quote or summary copy, an author name and title, and a linked CTA button.

Pick it over the other card modules when your content is case study testimonials that need a rotating carousel with dots, arrows, and autoplay rather than a static grid or filterable library. It expects an image and short quote-style copy per slide along with a named author, and works best when you have more case studies than fit in one row.

Use cases

Customer success story carousel
Rotating client testimonial slider
Case study quote with author photo
Autoplaying proof slider
Client win showcase with cta

Where it fits

Included with: PRO
Page sections: Proof, Testimonials, CTA

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.
Dots	Boolean
Arrows	Boolean
Autoplay	Boolean
Autoplay Speed	Number

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

Slides Repeats: min 1, default 3.

Field	Type	Notes
Slide Image	Image
Slide Content	Rich text
Slide Author Name	Text
Slide Author Title	Text

Slides › Icon

Field	Type	Notes
Icon Type	Choice	Options: Icon, SVG, None.
Icon	Icon
SVG	Text
Color	Color
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.

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

Slides › CTA › Default

Field	Type	Notes
Background	Color
Text	Color
Border	Color

Slides › CTA › Hover

Field	Type	Notes
Background	Color
Text	Color
Border Color	Color

Slides › 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
4.0.0	Stardust update
3.3.2	Arrow position fix
3.3.1	Fixed icon color
3.3.0	Accessibility improvements
3.2.0	Added responsive background options
3.1.1	Included slider styles dependecies
3.1.0	Added slider styles
3.0.1	Added new Link options
3.0.0	Added card style fields