Case Studies | SaaSFlow Docs

87 settingsPages

Where it is used

Content settings

What the module says and shows. Repeaters (groups you can add items to) are marked as such.

Setting Type What it does

Case studies come from Choice With the Case study listing template on a case study blog, cards come from its posts (title, summary, featured image, tags, and each post's results and logo), the tabs are its tags, and the newest post is the featured story.Options: Automatic: the blog's posts on a blog listing page, otherwise the list belowAlways the list belowDefault: Automatic: the blog's posts on a blog listing page, otherwise the list below

CategoriesRepeater · 4 settings

Filter tabs on normal pages. On a case study blog the tabs are the blog's tags; a category with the same name as a tag gives that tab its icon.

Name	Text	For example Marketing.Default: `Category`
Icon	Choice	A built-in icon, or choose Pick from icon library or Upload my own.Default: `Grid`
Library icon	Icon	Pick an icon from the library.
Icon image	Image	A square SVG or PNG.

Featured storyGroup · 13 settings

A large story above the grid, shown on the All tab with an empty search. On a case study blog it is the newest post, filled automatically; only Show, Label and Button text apply there.

Show the featured story On/off Turn off to show only the grid.Default: On

Image Image A wide photo, about 1200 x 800px. With a video link it becomes the video cover.

Video link Text Optional YouTube, Vimeo or .mp4 link. A play button appears on the image and the video plays in place.

Label Text Small label above the title.Default: FEATURED CASE STUDY

Title Text Main title.Default: How Bright Digital increased qualified leads by 320% with SaaSFlow

Description Rich text Short summary.

Industry Text Leave empty to hide.Default: Marketing Agency

Company size Text Leave empty to hide.Default: 50-100 employees

Location Text Leave empty to hide.Default: New York, USA

ResultsRepeater · 5 settings

Value	Text	For example 320%.Default: `0%`
Label	Text	What changed.Default: `Result`
Icon	Choice	A built-in icon, or choose Pick from icon library or Upload my own.Default: `Trend up`
Library icon	Icon	Pick an icon from the library.
Icon image	Image	A square SVG or PNG.

Button text Text Leave empty to hide the button.Default: Read full case study

Button link Link The full case study page.

Button: HubSpot CTA ID Text Optional. To use a HubSpot CTA instead of the button (so HubSpot tracks its views and clicks), paste the CTA's ID here. Find it in Marketing > CTAs: open the CTA and copy the number from the page address. Needs HubSpot's CTA tool. Leave empty to use the button.

Grid eyebrow Text Small label above the grid heading. Leave empty to hide it.Default: ALL CASE STUDIES

Grid heading Text Heading above the cards.Default: Customer stories from around the world

Grid description Text Text beside the heading.Default: Explore how different businesses use SaaSFlow to solve real challenges and ac...

Case studiesRepeater · 10 settings

Used on normal pages (on a case study blog the cards come from the posts). Use only company names, logos and results you have permission to publish.

Company Text Shown in the logo badge when no logo is uploaded.Default: Company

Company logo Image Shown in a white badge on the photo, about 200 x 60px.

Photo Image About 800 x 520px.

Published date Date Used by Sort by > Most recent (newest first). Stories without a date count as the newest, in the order they were added.

Title Text For example How Aveline increased online sales by 2.5x.Default: Case study title

Summary Text Two or three lines.

Categories Text Comma-separated names from the Categories list above, for example SaaS, Marketing. Used by the filter tabs.

Tags Text Comma-separated labels shown on the card. Leave empty to use the categories.

ResultsRepeater · 2 settings

Value	Text	For example 2.5x.Default: `0%`
Label	Text	What changed.Default: `Result`

Link Link The full case study page.

Section anchor Text Lets buttons elsewhere link straight here, for example a button linking to #case-studies.Default: case-studies

Style settings

In the module's Styles tab: layout, color mode, background, fonts, spacing and animation.

Setting Type What it does

Color mode Choice "Same as site" follows Theme settings > Color mode.Options: Same as siteLightDarkDefault: Same as site

Eyebrow style Choice "Same as theme" follows Theme settings > Eyebrow.Options: Same as themePlain textPillGradient badgeDefault: Same as theme

Highlight color Color Color of the active tab, links and metric icons. Starts as the theme's primary color.

FontsGroup · 2 settings

Heading font	Font	Starts as the theme's heading font. Change it to use another font in this module only.Default: `Outfit`
Text font	Font	Starts as the theme's body font. Change it to use another font in this module only.Default: `Inter`

Transparent background On/off Removes this section's background so the page background shows through. Useful for blending sections together.Default: Off

Background color Color Leave empty to use the theme colors for the current light or dark mode.

Background effectGroup · 6 settings

Show background glow	On/off	Default: `Off`
Intensity	Number	How strong the glow is. 0% hides it.Default: `60`
Flowing movement	On/off	Plays an entrance animation. Visitors who turn off motion on their device don't see it.Default: `On`
Fade out at the top and bottom	On/off	Fades the glow out at the edges so it blends into the next section.Default: `On`
Glow color 1	Color	Leave empty to use the theme primary color.
Glow color 2	Color	Leave empty to use the theme accent color.

Show tabs, search and sort On/off Turn off for a plain grid.Default: On

CardsGroup · 7 settings

Cards per row (desktop)	Number	Cards side by side on desktop. Tablets show two, phones one.Default: `3`
Card background	Color	Leave empty to use the theme card color.
Corner radius	Number	Roundness of the corners. 0 is square.Default: `16`
Show border	On/off	Draws a thin border around each card.Default: `On`
Shadow	Choice	Shadow under each card.Options: NoneSoftStrongDefault: `None`
Lift on hover	On/off	Cards rise slightly when hovered.Default: `Off`
Show arrow	On/off	A small arrow at the bottom of each card.Default: `On`

SpacingGroup · 4 settings

Leave empty to use the theme section spacing (Theme settings > Layout).

Top padding (desktop)	Number	Space above the content on desktop.
Bottom padding (desktop)	Number	Space below the content on desktop.
Top padding (mobile)	Number	Space above the content on phones.
Bottom padding (mobile)	Number	Space below the content on phones.

Animate when scrolled into view On/off Content fades up as the section comes into view. Visitors who turn off motion on their device see no animation.Default: On

Interface labels

Words on buttons and for screen readers. Change them to translate the module.

Setting	Type	What it does
All tab	Text	First filter tab.Default: `All Case Studies`
Search placeholder	Text	Placeholder in the search box.Default: `Search case studies...`
Sort label	Text	Label above the sort menu.Default: `Sort by`
Sort: most recent	Text	Order of the list.Default: `Most recent`
Sort: oldest	Text	Oldest stories first.Default: `Oldest first`
Sort: title	Text	Alphabetical.Default: `Title (A-Z)`
Card link	Text	Link at the bottom of each card.Default: `Read case study`
No results	Text	Shown when nothing matches.Default: `No case studies match. Try another category or search.`
Filter tabs	Text	Read by screen readers.Default: `Filter case studies by industry`
Play button	Text	Read by screen readers.Default: `Play video`
Pagination	Text	Read by screen readers.Default: `Case study pages`
Previous	Text	Pagination link.Default: `Previous`
Next	Text	Pagination link.Default: `Next`

Tip

Headings support [brackets] to highlight words and | for a new line. See Editing tips.