Three Pillars Coaching Cards — Elegant Divi 5 Layout

Cards Coaching Elegant

Elegant three-column cards section for coaches: define your vision, track progress, stay accountable. Serif typography, warm cream palette, gold icons.

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 three-card feature grid built for a coaching practice that wants to feel considered, not corporate. The section opens with a centered intro block — a 44px Playfair Display headline in warm near-black (#2a2522) sitting above a 640px-capped supporting paragraph in a softer stone tone (#5a534d). The 110px vertical padding on the warm off-white section background (#faf7f2) gives the whole block room to breathe, so it reads as a chapter marker rather than a checklist.

Below the intro, three equal 1/3 columns hold the pillars: Define Your Vision, Track Real Progress, and Stay Accountable. Each card is white with a 20px radius, 44px top / 40px bottom / 36px side padding, a soft brown-toned drop shadow (rgba(42,37,34,0.10)), and a 6px hover lift that deepens the shadow — a small, tactile signal that the cards are the focal point. Inside each card, a flex column with an 18px row-gap stacks a 52px gold-brown icon (#b08d57), a 26px Playfair heading, and a 16px body paragraph at 1.7 line-height, all center-aligned.

The palette does real work: warm cream section, ivory cards, muted charcoal text, and a single restrained accent gold that only appears on the icons. There's no second accent competing for attention. On tablet the three columns wrap with a 32px row-gap, and on phone the flex direction switches to column so each card gets full width — the same 20px radius and shadow carry through, so the elegance doesn't collapse into a plain stack.

What’s inside

Section with 110px top/bottom padding on a #faf7f2 warm-cream background
Centered intro row: 44px Playfair Display headline plus a 640px max-width supporting paragraph
Three-column 1/3-1/3-1/3 row with 32px column gap and stretched equal-height cards
White cards with 20px rounded corners, 36px side padding, and a warm shadow that deepens on hover
-6px translate-Y hover lift on each card for a subtle tactile response
52px accent icons in gold-brown (#b08d57) — two Divi glyphs and one Font Awesome glyph
26px Playfair Display card headings paired with 16px / 1.7 line-height body text
Responsive behavior baked in: tablet wraps with 32px row-gap, phone collapses to a single column

Who it’s for

This section suits executive, life, leadership, and career coaches who want a values-forward feel without going full corporate. It also fits therapists, wellness practitioners, boutique consultancies, and personal-brand sites for authors or speakers who describe their work as a method, philosophy, or framework. Anywhere you need to translate an abstract approach into three digestible pieces — a signature process, service tiers, retreat pillars, program phases — this layout does the job. The warm cream-and-gold palette leans premium and grounded rather than techy, so it's a natural fit for high-touch, high-price service businesses where trust and craft matter more than speed and scale.

Customization tips

To retheme, change the section background (#faf7f2), card background (#ffffff), heading color (#2a2522), body color (#5a534d), and icon color (#b08d57) — those five swatches carry the whole aesthetic. Playfair Display is the signature; swap it for another serif (Cormorant, Fraunces, Lora) globally through the two heading modules. Card headings work best at 2–4 words — anything longer starts pushing the cards to uneven heights on tablet before wrap kicks in. Body copy sits comfortably at 30–55 words per card; past that, either raise the card padding or the row's columnGap to keep breathing room. There are no images inside the cards, so the only asset decision is the three icons — pick from the Divi or Font Awesome libraries and keep the 52px size consistent. To go from three cards to four, split the row into 1/4 columns and reduce card side padding to ~28px so the copy doesn't feel cramped.

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 Three Pillars Coaching Cards — Elegant Divi 5 Layout

How does the three-card row behave on mobile?

On tablet the row wraps to two-up with a 32px row-gap, and on phone the flex direction switches to column so each card takes full width. The 20px radius, shadow, icon size, and typography stay identical across breakpoints.

Which Divi modules are actually used?

Five module types: one Section, two Rows, four Columns, three Icon modules, four Heading modules, and four Text modules. Nothing custom — everything is native Divi 5, so it lives entirely inside the visual builder.

Are the card icons images or icon-font glyphs?

They're vector icon-font glyphs at 52px. Two are drawn from Divi's built-in icon set and one from Font Awesome — swap any of them from the Icon module without touching CSS.

What should I edit first after importing?

Rewrite the intro heading and 640px-wide supporting paragraph so they name your actual framework, then replace the three card headings and body paragraphs. Swap the three icons last — they're the fastest way to make the section feel yours.

Can I add a fourth pillar without breaking the layout?

Yes. Duplicate any column, change the row's column structure from 1/3-1/3-1/3 to 1/4-1/4-1/4-1/4, and drop the card side padding from 36px to about 28px so the body copy still has room.

Does the hover lift work on touch devices?

The 6px translate and deeper shadow only fire on hover-capable pointers, so on phones and most tablets the cards render in their resting state — which is intentional; the lift is a desktop delight, not core to the design.

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.