Elegant Coaching Cards — Three Pillars Section

Cards Coaching Elegant

An elegant three-card coaching section in warm cream and gold tones. Showcase your signature pillars — clarity, momentum, alignment — with serif headings and soft-shadow cards.

Variations

Columns2 columns3 columns4 columns

IconsIcon on topIcon on left

StyleCircle badgePlain icon Numbered

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

This section leads with a centered eyebrow (THE PRACTICE in a warm taupe #8B7355, uppercase, 4px letter-spacing) that anchors the intro block. Below it, a Cormorant Garamond H2 at 46px (dropping to 32px on phone) sets an editorial tone, followed by a single supporting paragraph in a soft warm-gray #5A5048 at 18px/1.7. The intro column is capped at 760px and horizontally centered, which keeps the reading measure comfortable and forces the headline to breathe rather than stretch across the full container.

The pillars live in a three-column row (1_3, 1_3, 1_3) with a 32px column gap and alignItems: stretch, so uneven copy lengths still produce cards of equal height. Each card is a white surface on the warm cream section background #F8F5F0, wrapped in a 20px radius with a soft, warm-toned shadow (rgba(46,32,16,0.14), 34px blur, -14px spread) that lifts on hover to a 24px vertical offset while the whole card translates up 6px. Inside each card: a small circular icon badge (16px padding, 22px glyph, fit-content width so the circle stays a circle), a Cormorant Garamond title at 26px, a body paragraph at 16px/1.75 in #5A5048, and a text link styled as a caps-adjacent CTA in #8B7355 that darkens to #1F1A14 on hover.

The three pillars are color-coded by their icon badges — camel #C8A47A for Quiet Clarity, sage #7A8B72 for Sustainable Momentum, slate #3D4A5C for Aligned Ambition — which gives the trio visual variety without breaking the calm, neutral canvas. Section padding is 110px top and bottom, generous enough that the cards feel like a discrete chapter rather than a strip. On tablet the row wraps with a 24px row gap so cards drop to a 2+1 grid, and on phone the column direction flips vertical, stacking each card full-width for easy thumb scrolling.

What’s inside

One Divi 5 section with two rows: a centered intro block (eyebrow + H2 + lede) and a three-column pillar row
Three white pillar cards using the Icon module (mix of Divi and Font Awesome glyphs) with individually colored circular badges — camel, sage, slate
Editorial type pairing: Cormorant Garamond serif for headings (46px H2, 26px card titles) with a system sans body at 16–18px and 1.7–1.75 line-height
Warm neutral palette baked into the section: cream `#F8F5F0` background, ink `#1F1A14` headings, taupe `#8B7355` accents, muted brown-gray `#5A5048` body
Hover interaction on each card: -6px translate plus a deeper warm-toned box shadow (preset3, 24px vertical, 48px blur) for a tactile lift
Per-card CTA links styled as caps-tracked serif accents with a hover color swap from taupe to near-black
Explicit tablet and phone layout rules: row wraps with 24px row gap on tablet, flips to a vertical column stack on phone, and headline shrinks to 32px on mobile
20px rounded card corners, 36px internal padding, and `alignItems: stretch` so unequal copy lengths still produce equal-height cards

Who it’s for

This is built for one-to-one and small-group coaches whose brand leans considered rather than loud — life coaches, executive and leadership coaches, therapists in private practice, breathwork and somatic practitioners, career and transition coaches, and boutique consulting studios. It slots neatly into a services or methodology page where you want to show how you work in three moves without dropping the visitor into a long feature list. The warm cream + serif palette also carries well outside coaching: wellness studios, boutique law and financial advisors, wedding planners, interior designers, and creative agencies presenting a three-pillar process, values grid, or engagement model can drop it in with only copy and icon swaps.

Customization tips

Start with the copy: the eyebrow works best at 2–4 words, card titles hold their shape up to about 22 characters (two words like Quiet Clarity), and card body paragraphs are tuned for 40–60 words so the three cards visually match. To rebrand the palette, change the section background #F8F5F0, the heading color #1F1A14, the body/accent taupe #8B7355, and the three icon-badge fills (#C8A47A, #7A8B72, #3D4A5C) — keeping the same rhythm of one warm neutral plus three complementary tones is what makes the trio feel curated. The icons are Icon modules (not images), so swap the Divi/Font Awesome glyphs from the module picker rather than uploading assets. If you want photography instead of icon badges, replace each Icon module with an Image module at a square 1:1 ratio, ideally 400×400, and keep the 20px border-radius on the card intact. The per-card link is a plain text link — point it at your real service URLs, or delete it entirely if you'd rather funnel all three CTAs to one shared page.

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 Elegant Coaching Cards — Three Pillars Section

How do the three cards behave on tablet and phone?

The pillar row is set to `flexWrap: wrap` with a 24px row gap on both tablet breakpoints, so cards reflow to two-up and then one-orphan when width gets tight. On phone the row switches to `flexDirection: column` and each card stacks full-width. The intro H2 also drops from 46px to 32px at the phone breakpoint so it stays readable without wrapping oddly.

What Divi 5 modules is this actually made of?

It's a single Section with two Rows. The intro row uses a Text module (eyebrow), a Heading module (H2), and a Text module (lede). Each pillar card is a Column containing an Icon module, a Text module for the title, a Text module for the body, and a Text module holding the link. No third-party modules, no code modules — everything is native Divi 5.

Are there any images to swap, or is it all type and icons?

There are no photographic images in this section — the accents are three Icon modules with colored circular backgrounds. That's deliberate: it keeps the layout light, avoids licensing hassles, and lets you rebrand purely by changing colors and glyphs. If you prefer photos, replace each Icon with an Image module at a square 1:1 ratio.

What should I edit first to make this feel like my brand?

Start with the eyebrow and H2 in the intro row — they set the reader's expectation for the whole section. Then rewrite the three card titles (two-word noun phrases work best with the serif at 26px), then the card bodies, then the CTA links. Only after the copy is in place should you touch the palette and icons, so you're designing around real content instead of placeholders.

Can I change the number of pillars — say to two or four cards?

Yes. Duplicate or delete a column inside the pillar row and update the row's `columnStructure` (from `1_3,1_3,1_3` to `1_2,1_2` for two cards or `1_4,1_4,1_4,1_4` for four). The tablet wrap and phone stack rules already handle the reflow, so you don't need to touch responsive settings — just make sure the icon-badge colors still form a coherent trio or quartet.

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.