Page Header | SaaSFlow Docs

68 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 Short label shown above the heading. Leave empty to hide it.Default: PRICING

Heading Text Main heading of the page. Wrap words in [brackets] to highlight them.Default: Simple, transparent pricing for [every stage]

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

HighlightsRepeater · 5 settings

Up to four short points with an icon. Leave empty to hide them.

Icon	Choice	Icon shown in the tinted box. Choose Pick from icon library or Upload my own for any other icon.Default: `Check mark`
Library icon	Icon	Search the Font Awesome library and pick an icon. It takes the icon color.
Icon image	Image	A square SVG or PNG, at least 48 x 48px. Uploaded images keep their own colors.
Title	Text	Shown as the item's heading.Default: `Highlight`
Description	Text	Short line under the title. Leave empty to hide it.

Search boxGroup · 7 settings

Show a search box	On/off	A search box under the description.Default: `Off`
What it searches	Choice	Filtering works with modules on the same page that support it, such as the Integrations Directory.Options: Filters the cards on this page (for example an Integrations Directory)Searches the whole siteDefault: `Filters the cards on this page (for example an Integrations Directory)`
Placeholder	Text	Hint text inside the empty search box.Default: `Search integrations (e.g. Pipewise, Shopwave, Metricly)...`
Search results page	Text	Used when the box searches the whole site.Default: `/hs-search-results`
Screen reader label	Text	Read by screen readers for the search box.Default: `Search`
Popular searches label	Text	Text before the links under the search bar.Default: `Popular searches:`
Popular searches	Text	Quick search links under the search bar, separated with \| , for example Getting started \| Integrations \| Billing. Leave empty to hide them.

Main button text Text Text on the main button. Leave empty to hide it.

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.

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.

Illustration Image For the banner style use a wide image (about 1400 x 800px) with the artwork on the right; keep it under 1MB. Leave empty for a text-only header.

Floating badgesRepeater · 5 settings

Up to three small cards floating around the image (Text left, image right layout): the first at the top left, the second at the top right, the third at the bottom right.

Icon	Choice	A built-in icon, or choose Pick from icon library or Upload my own.Options: ChartPlug (integrations)Check markRocketStarPeopleLightningPick from icon libraryUpload my ownNo iconDefault: `Chart`
Library icon	Icon	Pick an icon from the library.
Icon image	Image	A square SVG or PNG.
Title	Text	Bold first line.Default: `Get started`
Text	Text	Smaller line under the title. Use \| for a new line.Default: `in minutes`

Callout cardGroup · 6 settings

A small card with an icon and a short message beside the text. Shown with the Text only layout, which then aligns the text to the left.

Show the callout card	On/off	Turn on to show the card.Default: `Off`
Icon	Choice	A built-in icon, or choose Pick from icon library or Upload my own.Options: ChartLightningStarShieldPeopleRocketPick from icon libraryUpload my ownNo iconDefault: `Chart`
Library icon	Icon	Pick an icon from the library.
Icon image	Image	A square SVG or PNG.
Text	Text	Short message. Press Enter, or type \| with a space on each side, for a new line.Default: `More insights. Less complexity. Greater impact.`
Show the curved arrow	On/off	A small hand-drawn arrow under the card.Default: `On`

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

Layout Choice Text left with the image on the right (tablets and phones show the text only); the image above the text (on every screen size); the image in a band of the Background color from edge to edge with the text below it on the page background; or text only, centered or on the left.Options: Text left, image rightImage on top, text belowImage on top in a color band, text belowText only, centeredText only, leftDefault: Text left, image right

Text alignment Choice Automatic keeps the text left with an image layout, even before an image is chosen, and centers it for Text only.Options: Automatic (centered for Text only, otherwise left)LeftCenteredDefault: Automatic (centered for Text only, otherwise left)

Image style Choice Use the banner for wide images with a soft background, and the floating style for transparent cut-out illustrations.Options: Background banner (fills the right side, fades into the text)Floating illustration (beside the text)Default: Background banner (fills the right side, fades into the text)

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

Highlight color Color Color for [bracketed] words in the heading. Leave empty for the theme gradient.

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`

Background color Color Color of the header band. With Image on top in a color band, the color of the band behind the image. Starts as the theme's alternate background.Default: #F8FAFC

Fade into the next section On/off The band's color and the banner image fade into the page background at the bottom, so the header flows into the section below instead of ending in a line.Default: On

Background effectGroup · 6 settings

Show background glow	On/off	Default: `On`
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. 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.

Image width Number The image's width on desktop, as a share of the page width. It's never wider than this, and extra spacing doesn't enlarge it. With Image on top it is the share of the text width.Default: 58

Image vertical position Choice Where the image sits in the header. Centered: beside the middle of the text. Top: level with the top of the text. Bottom: resting on the header's bottom edge.Options: CenteredTopBottomDefault: Centered

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.