Tech Mono Hosting Pricing Section for Divi 5: Two-Plan Highlight

Pricing SaaS Dark

A dark monochrome Divi 5 pricing section for SaaS hosting products. Side-by-side self-hosted (free, MIT) and managed cloud ($39/mo) plans with feature lists and CTAs. Space Grotesk + JetBrains Mono, tech aesthetic.

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

The section is built on a single divi/section with a near-black #131715 background — a green-tinted charcoal that reads as dark without going pure black. Vertical padding steps down from 88px on desktop to 64px on tablet and 40px on phone, so the section breathes proportionally on every screen. Inside sits one row split into two columns at a 1:2 ratio (8/24 left, 16/24 right on desktop), which gives the editorial copy column just enough room to anchor the section without competing with the cards.

The left column establishes context with a three-piece type stack: an h4 eyebrow in JetBrains Mono at 13px with 2px letter-spacing and muted sage #8d9892; an h2 headline in Space Grotesk at 40px with text-wrap: balance and tight −1px tracking; and a short body paragraph back in JetBrains Mono at 17px. The two-font system runs throughout the entire layout — Space Grotesk handles display sizes (headings, prices), JetBrains Mono handles everything labeling or secondary. The contrast between a geometric grotesque and a monospace creates a developer-product texture that feels both polished and technical.

The right column holds a CSS Grid group with two plan cards side by side, 24px apart on desktop and collapsing to a single column on phone. The Self-serve card sits on #0b0d0c — the deepest dark in the palette — with a 1px dashed border in #2a312d and a 2px border-radius. The Cloud card is the visual inversion: #e8ece9 off-white background, dark text throughout, and the same dashed-border motif applied in near-black. Both cards share identical internal structure — uppercase label, h3 plan name, a 56px price figure, a billing-cycle line, a dashed top-border separator, and five icon+text feature rows — so swapping copy or reordering them is a direct edit with no structural changes.

On tablet the row wraps and both column widths expand to 24/24 (full), so the editorial copy sits above the cards. On phone the card grid collapses from two columns to one, and each card's internal padding steps from 44px down to 32px. Price typography scales from 56px to 48px to 40px across the three breakpoints. Nothing is hidden or repositioned beyond the flex-direction change, which means the reading order stays coherent for screen readers and keyboard users.

What’s inside

One `divi/section` + one `divi/row` with a 1:2 column ratio (8/24 left editorial, 16/24 right cards) that stacks to full-width on tablet and phone
CSS Grid `divi/group` for the card pair: 2 columns with 24px gap on desktop, auto-collapsing to 1 column on phone via `gridColumnCount`
Two plan cards (Self-serve and Cloud) with inverted palettes: `#0b0d0c` dark card with dashed `#2a312d` border, `#e8ece9` light card with dark text and matching dashed border
Five `divi/icon` + `divi/text` flex-row feature items per card, separated from the price block by a 2px dashed top border
Dual CTA buttons with distinct styles: ghost/outlined (transparent fill, dashed `#e8ece9` border) for Self-serve, and solid-dark (`#0b0d0c` fill) for Cloud
Two-font system — Space Grotesk for the 40px headline and 56px price figures, JetBrains Mono for all labels, body text, and buttons — with letterspacing tuned per role (2px on uppercase labels, −1px on display sizes)
Three-breakpoint padding cascade on section (88/64/40px) and cards (44/36/32px), with font-size steps on the headline and price figures

Who it’s for

This section fits SaaS products, developer tools, and open-core platforms that offer a self-hosted path alongside a managed cloud option. It works well for database-as-a-service products, workflow automation tools, analytics platforms, or any software where the free/open-source tier is a real offering with Docker support and upgrade scripts. Agencies building sites for infrastructure or DevOps-focused clients will find the JetBrains Mono aesthetic immediately recognizable to the technical buyer. It also suits low-code or no-code platforms that want to project developer credibility while keeping the managed tier visible and commercially distinct.

Customization tips

The fastest edit is swapping the two card background colors at the Group level — any dark/light pairing with sufficient contrast will hold the layout's logic, since both cards carry the same internal structure. Keep plan names under about 12 characters and prices under 6 characters at the 56px display size; longer strings will push into the adjacent card gap before wrapping. The feature lists are flex-column groups, so adding or removing rows is straightforward, but keep both cards roughly equal in row count to preserve the side-by-side height match on desktop. The eyebrow label (h4) and billing-cycle line are short by design, 20–30 characters works well. To change the button style on the Cloud card from solid to ghost, set the background color to transparent and add a visible border color. The monospace labels use 2px letter-spacing and uppercase capitalization as part of their visual identity; changing the font family there will require revisiting the spacing values.

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 Tech Mono Hosting Pricing Section for Divi 5: Two-Plan Highlight

How does the two-column layout behave on mobile?

On tablet the row's `flexWrap` switches to `wrap`, so the editorial copy column (8/24 on desktop) expands to full width and sits above the card grid. On phone the card grid's `gridColumnCount` drops to 1, stacking Self-serve above Cloud. The section padding also steps down from 88px to 40px so the section doesn't feel oversized on small screens.

Which Divi 5 modules does the layout use?

Section, Row, Column, Group (nested — used for the card grid, each plan card, the feature list container, and each individual icon+text row), Heading, Text, Icon, and Button. There are no image modules, no sliders, and no third-party elements.

The Cloud card is light while the section background is dark. Is that intentional?

Yes. The `#e8ece9` card is the primary/paid plan and uses the palette inversion to draw the eye. The dark `#0b0d0c` card for Self-serve reads as secondary against the section's `#131715` background because the value contrast is low. Swap the card positions if your free tier should be less prominent than the paid one.

What should I edit first when adapting this to my product?

Start with the `h2` headline in the left column and the price figures in both cards — those are the three highest-visual-weight text elements. Then update the five feature rows per card and the CTA button labels. The section background and card palette can stay as-is or be adjusted last once the copy is confirmed.

Can I add a third plan card to the grid?

The Group is set to `gridColumnCount: 2` on desktop, so adding a third Group child would require changing that to `3` and adjusting the column gap. The internal card structure is self-contained, so the new card can be duplicated from either existing one. Be aware that three cards at equal width in a 16/24 column will be narrower than the current two — test at 1024px where space is tightest.

Are there any images or external assets in this layout?

No. The layout uses only text, icons (Font Awesome checkmark `f00c` via the native Divi Icon module), and solid background colors. There are no Pexels or placeholder images, no background images on any group or section, and no video embeds. Every visual element is typography, spacing, or border.

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.