Stats Strip | SaaSFlow Docs

47 settingsPagesBlog postsBlog listings

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

Eyebrow text Text Short label shown above the heading, such as a category or theme.Default: TRUSTED BY GROWING BUSINESSES

Heading Text Optional. Type | where you want a new line, and wrap words in [square brackets] to highlight them.

Description Rich text Supporting text. Keep it to one or two sentences for best results.

StatsRepeater · 7 settings

Icon source	Choice	Used by the Icon row and Cards designs. Pick an icon from the library, upload one, or paste SVG code.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.
Number (e.g. 20K+)	Text	The number to highlight, for example 20K+ or 99.9%.
Label	Text	Supporting text. Keep it to one or two sentences for best results.
Note	Text	Optional small line under the label, for example +12% this year. Shown in the Cards design.

Image Image Used by the Image left and Image right layouts.

Style settings

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

Setting Type What it does

Design Choice Icon row and Cards use each stat's icon. Framed shows the eyebrow as a badge on the panel's top edge. For a light look, set Background > Type to Theme background.Options: Design 1: Classic (big numbers)Design 2: Icon row (icon beside each number)Design 3: CardsDesign 4: Minimal (accent line above each number)Design 5: Framed (stats in a bordered panel, badge on top)Default: Design 1: Classic (big numbers)

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

StatsGroup · 6 settings

Stats per row (centered strip, desktop)	Number	How many items sit side by side on desktop.Default: `4`
Show dividers between stats	On/off	Thin lines between stats: side by side on wide screens, and between rows when the stats wrap on tablets and phones. Not used by the Cards design.Default: `Off`
Number style	Choice	Design default: solid dark numbers for Icon row, the brand gradient for the others (on the theme background). Solid uses Number color, or the heading color if that's empty.Options: Design defaultBrand gradientSolid colorDefault: `Design default`
Number color	Color	Leave empty to use the text color (or the brand gradient on the theme background).
Icon color	Color	Icon row and Cards designs. Leave empty to use the highlight color.
Count up when shown	On/off	Numbers count up from zero as the section scrolls into view, keeping symbols like +, % and M. Still for visitors who turn off motion.Default: `On`

Highlight color Color Color for [bracketed] heading words. Leave empty for the default.

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

BackgroundGroup · 6 settings

Background	Choice	Kind of background for this section.Options: Theme background (follows light/dark mode)Solid colorBrand gradient (primary to accent)Custom gradientDefault: `Solid color`
Color / gradient start	Color	The solid color, or the first color of a custom gradient.Default: `#1E1B4B`
Gradient end	Color	Used by the custom gradient.Default: `#7C3AED`
Gradient angle	Number	Direction of the gradient. 90 runs left to right, 180 top to bottom.Default: `135`
Text color on colored backgrounds	Color	Used with a solid color or gradient background. The theme background uses the theme text colors.Default: `#FFFFFF`
Show background wave	On/off	A subtle wave shape in the background.Default: `On`

Background animation Choice A subtle moving background behind this section. Soft bubbles: glass circles floating. Aurora: large blurred color clouds drifting. Dot grid: a faint dotted pattern drifting. Ripples: soft rings spreading out. 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. Lower is subtler.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

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.

Layout Choice How the image and text are arranged.Options: Centered stripImage leftImage rightDefault: Centered strip

Image width (image layouts) Number Share of the content width the image takes on desktop.Default: 45

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

Tip

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