Sticky Services Grid | SaaSFlow Docs

74 settingsPagesBlog postsBlog listings

Where it is used

Automation product page

Content settings

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

Setting Type What it does

Badge Text Small label above the heading. Leave empty to hide it.Default: All-in-one platform

Badge icon Choice Small icon in the badge, in the highlight color.Options: SparkleBoltStarCheckNo iconDefault: Bolt

Heading Text Wrap words in [brackets] to highlight them.Default: One workspace for every [growth team]

Description Rich text Text under the heading.

Main button text Text Text on the main button. Leave empty to hide it.Default: Book a walkthrough

Main button link Link Where the main button goes.

Main 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.

Second button text Text Text on the second button. Leave empty to hide it.Default: Try it free for 14 days

Second button link Link Where the second button goes.

Second 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.

ServicesRepeater · 8 settings

Each card on the grid side. Add as many as you need.

Icon source	Choice	Pick an icon from the library, upload an SVG or PNG, or paste SVG code. If the chosen one is empty, any of the others that is filled in is used.Options: Icon libraryUpload an imageCustom SVG codeDefault: `Icon library`
Icon	Icon	Search the Font Awesome library and pick an icon. It takes the item's icon color.
Icon image	Image	A square SVG or PNG, at least 48 x 48px. Uploaded images keep their own colors.
SVG code	Text	Paste an element. Use stroke="currentColor" or fill="currentColor" so it takes the icon color.
Title	Text	Card heading.Default: `Service name`
Points	Text	One point per line. Each gets a check mark.Default: `First benefit. Second benefit.`
Link text	Text	Leave empty to hide the link.Default: `See how it works`
Link	Link	Where the card links to.

Style settings

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

Setting Type What it does

LayoutGroup · 15 settings

Text side	Choice	Which side the heading and buttons sit on (desktop).Options: LeftRightDefault: `Left`
Text column width	Number	Share of the width for the text side (desktop).Default: `34`
Sticky text	On/off	The text stays in view while the cards scroll past (desktop).Default: `On`
Sticky distance from top	Number	Space kept above the sticky text, so it clears a sticky header.Default: `120`
Cards per row on desktop	Number	Screens 1024px and wider.Default: `2`
Cards per row on tablet	Number	Screens from 640px to 1023px.Default: `2`
Cards per row on phones	Number	Screens under 640px.Default: `1`
Space between cards	Number	Gap between cards.Default: `24`
Card scrolling	Choice	With the page: all cards show and scroll normally. Scroll by itself: the cards move upward in a fixed-height window, in a loop.Options: With the pageScroll by itselfDefault: `With the page`
Window height	Number	Height of the scrolling window (desktop and tablet).Default: `640`
Seconds per row	Number	How long each row of cards takes to pass. Higher is slower.Default: `5`
Direction	Choice	Which way the cards move.Options: UpwardDownwardDefault: `Upward`
Pause on hover	On/off	Stops while a visitor points at or tabs into the cards.Default: `On`
Fade top and bottom	On/off	Soft fade where cards enter and leave.Default: `On`
Scroll by itself on phones	On/off	Off: phones show all cards as a normal list.Default: `Off`

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

Badge style Choice Look of the small badge above the heading.Options: Same as themePlain textPillGradient badgeDefault: Same as theme

Highlight color Color Color of highlighted heading words, the badge icon, card icons and links. 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.

Background animation Choice A subtle moving background behind this section. Brand colors only; still for visitors who turn off motion.Options: NoneSoft bubblesAurora glowDrifting dot gridRipplesDefault: None

Animation strength Number How visible the background animation is.Default: 45

Number of bubbles Number How many bubbles float in this section. Phones show about half of them.Default: 6

Bubble arrangement Number 0: this section gets its own random arrangement. Pick any other number to shuffle the bubbles into a new one, for example if a bubble sits behind your text.Default: 0

Dotted line after the badge On/off A dotted rule that runs from the badge to the edge of the text column.Default: On

CardsGroup · 9 settings

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`
Dotted dividers	On/off	Dotted lines under the card title and above the link.Default: `On`
Point marker	Choice	Shown before each point.Options: Check markDotNoneDefault: `Check mark`
Icon color	Color	Card icons and check marks. Leave empty to use the highlight color.
Icon size	Number	Card icon size.Default: `26`

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
Services list	Text	Name of the card list for screen readers.Default: `Our services`

Tip

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