Feature Cards (Boxed) | SaaSFlow Docs

70 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: WHAT MAKES US DIFFERENT

Heading Text Wrap words in [square brackets] to highlight them.Default: More than just analytics.

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

Feature CardsRepeater · 10 settings

Up to 24; they wrap onto new rows using Cards per row.

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	Shown as the item's heading.
Description	Text	Supporting text. Keep it to one or two sentences for best results.
Card image	Image	Used when Styles > Cards > Card media is Full-width image. About 800 x 450px.
Link	Link	Where the card goes. Styles > Cards > Card action decides how it's shown: an arrow, a text link, a button, or the whole card.
Link text	Text	Text of the link or button.Default: `Learn more`
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.

Side imageGroup · 4 settings

Optional photo beside the cards (the cards then sit in two columns on the left), with a small stat badge on it.

Image	Image	A photo, about 800 x 900px. Leave empty for no side image.
Badge label	Text	Small text on the badge, for example Higher conversions. Leave empty to hide the badge.
Badge value	Text	Big figure on the badge, for example +34%.
Badge note	Text	Small grey line, for example vs last month.

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 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`

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

CardsGroup · 14 settings

Cards per row (desktop)	Number	How many items sit side by side on desktop.Default: `4`
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`
Card media	Choice	What sits at the top of each card. Full-width image uses each card's Card image.Options: IconFull-width imageNoneDefault: `Icon`
Image style	Choice	Edge to edge fills the top of the card.Options: Edge to edgeInset, with space around itDefault: `Edge to edge`
Image shape	Choice	Every card's image is cropped to this shape.Options: Wide (16:9)Landscape (3:2)Classic (4:3)SquareDefault: `Wide (16:9)`
Icon position	Choice	Where each card's icon sits.Options: Above the textTop right cornerBeside the titleLeft of all the textDefault: `Above the text`
Icon style	Choice	The shape behind each icon.Options: Tinted squareTinted circlePlain iconDefault: `Tinted square`
Card action	Choice	What each card offers at the bottom. Uses each card's Link (and Link text or HubSpot CTA). Without a link, the arrow is just decoration and the other actions are left out.Options: NoneArrowText linkButton or HubSpot CTAWhole card is a linkWhole card is a link, with an arrowDefault: `Arrow`
Button style	Choice	Look of the card buttons.Options: PrimaryOutlineDefault: `Outline`
Show arrow (old setting)	On/off	Replaced by Card action.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.

Header alignment Choice Same as the cards, centered above them, or in a column to the left of the cards on desktop.Options: Same as the cardsCenteredBeside the cards (left)Default: Same as the cards

Heading alignment Choice Alignment of the eyebrow, heading and description.Options: LeftCenterDefault: Left

Card 1 icon color Color Icon color for items 1, 9, 17 (the 8 colors repeat for more items).Default: #8B5CF6

Card 2 icon color Color Icon color for items 2, 10, 18 (the 8 colors repeat for more items).Default: #10B981

Card 3 icon color Color Icon color for items 3, 11, 19 (the 8 colors repeat for more items).Default: #D946EF

Card 4 icon color Color Icon color for items 4, 12, 20 (the 8 colors repeat for more items).Default: #3B82F6

Card 5 icon color Color Icon color for items 5, 13, 21 (the 8 colors repeat for more items).Default: #EC4899

Card 6 icon color Color Icon color for items 6, 14, 22 (the 8 colors repeat for more items).Default: #3B82F6

Card 7 icon color Color Icon color for items 7, 15, 23 (the 8 colors repeat for more items).Default: #EC4899

Card 8 icon color Color Icon color for items 8, 16, 24 (the 8 colors repeat for more items).Default: #14B8A6

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.