SaaS Feature Cards — Minimal 3-Column Divi 5 Layout

Cards SaaS Minimal

Clean, minimal Divi 5 feature cards section for SaaS sites. Three-column blurb grid with icons, soft shadows, and hover lift — ready to import.

Variations

Columns2 columns3 columns4 columns

IconsIcon on topIcon on left

StyleCircle badgePlain iconNumbered

Rate this element

Be the first to rate

Download this section — free

Divi 5 JSON — import in seconds
Commercial license included
No account needed

Click to view the full page

Overview

A restrained three-column feature grid designed for SaaS pages that need to move fast without shouting. The section sits on a near-white #f7f8fa canvas with generous 100px top and bottom padding, giving the cards room to breathe. A centered intro pairs a 40px, tight-tracked headline ("Built for teams that ship.") with a single 18px supporting line, then the three cards drop below in a row separated by a 40px bottom margin so the hierarchy stays obvious at a glance.

Each card is a white panel with 36px of interior padding on all sides, a 20px border radius, and a hairline 1px border tinted at 6% opacity — soft enough to read as edge, not decoration. A subtle drop shadow anchors the cards at rest and deepens on hover, while a −6px translate lifts the card two shadow steps up. Inside every card sits one Divi blurb: a 36px accent icon in #2563eb, a 20px slate-900 title, and a 15px slate-500 body with 1.65em line-height so short claims stay comfortable to scan.

Mobile behavior is handled in the layout, not left to the theme. Cards stretch to equal height on desktop with a 32px column gap; at tablet the row wraps; at phone the row flips to a column stack and each card fills the width. The centered intro reads as one composed unit whether the section lands on a homepage third-fold, a product tour, or a mid-page recap on a longer landing.

What’s inside

One Divi section with 100px vertical padding on a `#f7f8fa` canvas
Centered intro row using a native Divi heading (40px, −0.5px tracking) and a Divi text module
Three equal 1/3 columns with a 32px column gap, stretching to equal height on desktop
Three Divi blurb modules — one per card — with left-aligned 36px icons in `#2563eb`
Rounded 20px cards on a white fill with a hairline border and boxShadow preset 3
Hover state that lifts each card −6px and swaps to a deeper 34px-blur shadow
Responsive rules baked into the row itself: wrap at tablet, column stack at phone
Mix of Font Awesome and native Divi icons (chart-line, magic-wand, shield)

Who it’s for

Best fit for SaaS marketing pages that need a compact feature summary — product homepages, category pages, or a mid-page recap on longer landings. The three-card slot suits pillar benefits (analytics, automation, and security are the seed copy), a stripped-down plan comparison, or a "what's included" block on onboarding sites. Beyond SaaS, the same structure works for agencies listing service tiers, B2B tools explaining integrations, and internal-tool teams documenting capabilities. Because the icons and copy live in Divi blurbs, non-designer teammates can swap content without touching layout. Skip this one if you need four or more cards in a row, or if your brand leans dense and editorial — the whitespace is the whole point.

Customization tips

Palette lives in three places: the #2563eb icon color, the #0f172a headings, and the #475569 body copy. Change the icon color first — it's the only accent, and a single swap across the three blurbs restyles the whole grid. Keep card body copy under two short sentences (about 25 words); the 15px, 1.65em line-height was tuned for scannable claims, not paragraphs, and titles work best under five words. If you need to swap icons, use Divi's built-in picker in the blurb — the layout already mixes Font Awesome (chart-line, magic-wand) and Divi's own set (shield), so either family drops in cleanly. No images to worry about: the cards are icon-driven, so there are no aspect ratios to protect. To scale from three cards to four, duplicate a column and change the row's column structure to 1_4,1_4,1_4,1_4 — the padding, radius, shadow, and hover lift are set at the column level and carry over untouched.

How to install this layout

Download the layout JSON file from this page.
Open the target page in the Divi 5 builder.
Open the portability panel (up/down arrows icon) and choose the Import tab.
Upload the JSON. Tick “replace existing content” only for full-page imports.
Check the page at desktop and mobile widths, then swap in your copy and images.

Full walkthrough with troubleshooting: How to Import a Divi 5 Layout.

Questions about SaaS Feature Cards — Minimal 3-Column Divi 5 Layout

How does this section behave on tablet and phone?

The row wraps at tablet so cards can drop to a second line if the container narrows, and at phone the flex direction flips to column so each card fills the width and stacks vertically. The centered intro heading and description keep their alignment at every breakpoint.

Are the icons images or an icon font?

They're icon-font glyphs set inside Divi blurb modules — no images to upload or size. Two use Font Awesome (chart-line, magic-wand) and one uses Divi's built-in shield. Swap any of them from the blurb settings without touching CSS.

What should I edit first after importing?

Rewrite the three blurb titles and body copy to match your product's actual pillars, then change the `#2563eb` icon color to your brand accent. The heading "Built for teams that ship." is a placeholder — replace it with your own one-line thesis before publishing.

Can I add a fourth card without breaking the layout?

Yes. Duplicate one of the 1/3 columns in the second row and change the row's column structure to `1_4,1_4,1_4,1_4`. The card padding, 20px radius, shadow preset, and −6px hover lift are all set at the column level, so the new card inherits the same styling automatically.

Is the hover animation heavy?

No — it's a CSS transform (−6px translate on Y) plus a shadow swap, both applied at the column level. There's no JavaScript and no image transitions, and it degrades gracefully on touch devices where hover isn't triggered.

Which Divi version does this layout need?

Divi 5. The layout is generated natively for Divi 5 and validated against its real module structure before publication, so it imports clean into the current builder.

Can I use this layout on client websites?

Yes. Every download includes a commercial license covering unlimited sites you own or build for clients. Only reselling or redistributing the layout file itself is prohibited.