Corporate Bookkeeping Pricing Section for Divi 5: Two-Plan Highlight

Pricing Agency Corporate

A clean corporate pricing section for accounting and bookkeeping agencies. Two side-by-side plans with feature lists, IBM Plex Sans typography, and a dark navy highlight card. Ready to import into Divi 5.

Rate this element

Be the first to rate

Download this section, free

Divi 5 JSON, imports in seconds
Commercial license included
No account needed

Click to view the full page

Overview

This section uses a classic asymmetric two-column row: the left column (one-third of the 24-unit flex grid on desktop) holds the headline group, while the right column (two-thirds) contains the plan cards. That proportion keeps the pitch copy close to the cards without competing with them. The outer section sits on #f2f5fa, a cool blue-grey that reads as professional without the harshness of white, and the 96px vertical padding on desktop gives the whole block room to breathe -- scaling down to 68px on tablet and 44px on phone.

The two plan cards live inside a CSS Grid group with a 24px column and row gap. The Essentials card is white with a 1px #d3dbe8 border and dark navy text throughout. The Finance team card inverts completely: #13233f background, white text and icons, white CTA button with navy label. That inversion is the primary visual signal of hierarchy -- no badges, no color accents, just the filled dark card against the light one. A thin 2px top-border rule inside each card separates the feature list from the pricing block above it, giving the list its own breathing zone without adding visual weight.

Price figures are set at 56px with a -1px letter-spacing and 700 weight in IBM Plex Sans, making them the largest element on the card and the natural first read. The plan name sits above as an h3 at 28px, and the tier label ("Essentials" / "Most popular") uses a 13px uppercase tracked label -- the same treatment applied to the section eyebrow heading on the left. That typographic consistency ties the whole layout together across both columns.

On mobile, the row wraps into a single column with flexDirection: column, and the card grid drops from two columns to one. All three breakpoints (desktop, tablet, phone) have explicit padding reductions coded into every card group, so nothing collapses or clips at intermediate sizes. The left-column heading scales from 40px to 30px across three steps, keeping the copy legible without overflowing its container.

What’s inside

Two-column asymmetric row (8/24 left + 16/24 right on desktop, full-width stacked on mobile) built with native Divi 5 Row and Column modules
Two standalone plan cards using nested Divi 5 Group modules -- one white/light, one solid navy -- both with 6px border-radius and explicit three-breakpoint padding scaling
56px bold price display inside each card using a Divi 5 Text module, with tablet and phone font-size overrides (48px / 40px) set directly in module decoration
Five icon-plus-text feature rows per card, each built from a Divi 5 Icon module (Font Awesome checkmark, 15px) paired with a Text module inside a flex row group
2px top-border divider group separating feature lists from price blocks, using Divi 5 Group border decoration with selective top-only border override
Per-card CTA Divi 5 Button module with 6px radius, 14px/28px padding, ghost style on the light card and filled white on the dark card
Outer section background set to `#f2f5fa` with 96px/68px/44px vertical padding across three breakpoints -- no images or gradients required
IBM Plex Sans used at every typographic level (eyebrow, h2, h3, price, body, button) for a unified corporate typographic system

Who it’s for

This layout suits accountancy practices, bookkeeping firms, and finance consultancies selling fixed-fee service tiers to small business clients. It also fits any professional services agency -- legal, HR, or IT managed services -- that wants to present two clearly differentiated plans where one is a clear upgrade. The navy-inverted "most popular" card pattern works especially well when one plan carries a notably higher price point and needs to lead the visitor's eye without the need for a separate badge or ribbon element.

Customization tips

Start by swapping the section background (#f2f5fa) and the dark card fill (#13233f) together as a pair -- those two values set the entire palette. Any dark navy, charcoal, or deep teal works. The white card border (#d3dbe8) should lighten or darken proportionally with your background choice.

For copy, the price figures use a single <p> tag each -- keep them to four characters or fewer (e.g. "£490") to avoid line-breaking at the 56px size on smaller phones. Feature list items are individual Text modules; five per card is the comfortable maximum before the card height diverges noticeably between the two plans. The left-column h2 has textWrap: balance enabled, so headlines up to about eight words reflow neatly -- beyond that, manually add a line-break. The eyebrow label and tier labels use uppercase 13px tracked text; keep replacements short (one or two words) to preserve the spacing rhythm.

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 Corporate Bookkeeping Pricing Section for Divi 5: Two-Plan Highlight

How does the layout stack on mobile?

The row has `flexWrap: wrap` on tablet and `flexDirection: column` on phone, so the left headline group appears above the card grid. The card grid itself switches from two columns to one column on phone via a `gridColumnCount: 1` override on the outer Group module.

Which modules make up each plan card?

Each card is a Divi 5 Group module containing: a Text module for the tier label, a Heading (h3) for the plan name, a Text module for the price, a Text module for the billing note, a nested Group for the feature rows (each row is another Group with an Icon and a Text), and a Button module at the bottom.

Can I add a third plan card without breaking the layout?

The outer card container uses `gridColumnCount: 2` on desktop. Adding a third Group inside it will extend to a third column only if you change that value to 3. At two columns the grid is intentional -- a third card at the same width would require reducing card padding or switching to a three-column row structure.

Does the layout use any images?

No. The section background is a flat hex color, the cards use solid backgrounds, and the checkmark icons are Font Awesome glyphs rendered by Divi 5's Icon module. There are no image modules or background images anywhere in the JSON.

What should I edit first after importing?

Update the three Text modules that hold the price figures, then work through the feature list Text modules in each card. After copy is finalized, swap the CTA button link URLs. Color changes are quickest applied at the section background and the dark card Group background -- those two edits cascade the palette across the whole section.

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.