Tech Mono API Pricing Section for Divi 5: Three-Tier Usage-Based Plans

Pricing SaaS Dark

Dark monospace API pricing layout for Divi 5 SaaS sites. Three usage-based tiers (Sandbox, Live, Volume) with JetBrains Mono typography and a neon green accent card. No seats, no minimums.

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 opens with a centered two-line header before the cards ever appear. An h4 eyebrow in JetBrains Mono — 13px, 2px letter-spacing, all-caps, muted #8d9892 — reads "API pricing" and anchors the context. Directly below, an h2 in Space Grotesk at 44px (36px tablet, 30px mobile) carries the headline "Pay per request. Stop paying when you stop." with text-wrap: balance set to prevent awkward orphans. Both text groups are center-aligned and constrained to 720px and 640px max-widths, keeping the copy column narrow against the near-black #0b0d0c section background — a deliberate choice to make the cards feel like they emerge from a terminal rather than a generic marketing page.

The three pricing cards use align-items: stretch in the flex row, so all three columns match height regardless of content differences. Sandbox and Volume share the same dark treatment — #131715 card background, 1px dashed #2a312d border, 2px border-radius — while the featured Live card inverts completely to #3dff9a (electric green), with all internal text and icons switching to #04130b for contrast. A pill badge reading "Most popular" in uppercase JetBrains Mono sits above the Live plan name, dark-backgrounded at #131715 with rounded 12px corners — a contained capsule that doesn't compete with the price numeral.

Price display is handled through a flex baseline group that aligns the large numeral with the per-unit label. The numeral itself uses Space Grotesk at 44px weight-700 (stepping down to 40px tablet and 36px mobile), while the unit string sits in JetBrains Mono at 15px — the pairing reinforces the developer-tool aesthetic without needing any imagery. Each card's feature list is separated from the pricing block by a single top dashed border, and the three feature rows are icon-text pairs using Font Awesome checkmarks at 15px, aligned to flex-start so taller feature lines don't push the icon to center.

On mobile the column row switches to flex-direction: column, stacking all three cards vertically at full width. Section vertical padding scales from 88px desktop to 64px tablet to 40px phone. Nothing relies on images, background gradients, or external assets — the entire visual weight comes from the two-font stack, the green accent, and the dashed-border motif that runs consistently across card borders, dividers, and buttons.

What’s inside

Three-column flex pricing row (Sandbox / Live / Volume) with `align-items: stretch` so cards equalize height automatically
Featured card visual inversion: Live tier uses `#3dff9a` electric green background with `#04130b` text and a dark 'Most popular' pill badge
Dual-font pricing display: Space Grotesk numeral (44px, weight 700) paired with JetBrains Mono unit label on a flex baseline row
Per-card feature lists built from native `divi/icon` + `divi/text` row groups, each using Font Awesome `f00c` checkmarks aligned to `flex-start`
Dashed-border motif applied consistently to card outlines, internal dividers, and CTA buttons — no solid borders anywhere in the layout
Three distinct CTA buttons: 'Get a key' (transparent) on Sandbox, 'Get a key' (dark fill) on Live, and 'Contact us' (transparent) on Volume — each scoped to its card's color context
Responsive column collapse: desktop 1/3 + 1/3 + 1/3, tablet wraps to rows, phone stacks fully with `flex-direction: column`

Who it’s for

This section is purpose-built for SaaS products, developer tools, and API businesses that charge by consumption rather than by seat. It fits companies launching usage-based tiers — think data enrichment APIs, AI inference endpoints, geocoding services, or any platform where a sandbox-to-production upgrade path matters. Infrastructure, fintech, and devtools founders building their own pricing pages in Divi 5 will find the monospaced type and dark palette credible to a technical buyer. It also works for internal platform teams that need a clean pricing breakdown embedded within a broader Divi site.

Customization tips

The palette lives in three places: the section background (#0b0d0c), the card backgrounds (#131715), and the accent card fill (#3dff9a). Swap all three in the Divi visual builder to recast the theme — for example, a purple accent (#b57bee) over an off-white section for a lighter SaaS look. Keep the section and card backgrounds at least 20% darker than each other so the card depth reads clearly.

Plan names and subtitles are short by design — "Sandbox", "For testing." Keep tier names under 12 characters and subtitles under 25 to avoid wrapping inside the 24px card padding. The price numeral can display any string (e.g. "$49" or "Custom") without layout impact since it sits in a flex baseline group. Feature rows accommodate one line each at the default 16px JetBrains Mono size; if a feature description wraps to two lines, increase the card's rowGap from 12px to 16px. The 'Most popular' badge on the Live card is a standalone group — reposition it or remove it without touching any other module.

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 API Pricing Section for Divi 5: Three-Tier Usage-Based Plans

How do the three cards stay equal height when they have different amounts of content?

The parent row uses `align-items: stretch`, and each card column has `flexGrow` and `flexShrink` set on the feature-list group — so the features area expands to fill whatever height the tallest card establishes. Adding or removing feature rows on one card will not cause the others to misalign.

What modules make up each pricing card?

Each card is a `divi/column` containing two `divi/group` blocks. The top group holds the plan heading, subtitle, and price row. The bottom group (which grows to fill remaining height) holds the icon-text feature rows, separated from the price block by a single dashed top border, plus a `divi/button` pinned to the bottom.

Is the green 'Most popular' accent card easy to swap to a different tier?

Yes. The accent is purely a column background color (`#3dff9a`) plus inverted text colors (`#04130b`). To move the highlight to the Volume card, change the column backgrounds and flip the text/icon colors on both cards. The pill badge is a nested `divi/group` inside the Live column — cut and paste it into whichever column you want to feature.

The buttons say 'Get a key' and 'Contact us' — do they use different modules?

All three are standard `divi/button` modules. The Sandbox and Volume buttons use a transparent background with a dashed border; the Live card button uses the dark `#131715` fill. Just the background and border color values differ — the markup is identical, so you can add links or swap button text without touching any other setting.

How does the layout behave on a phone?

On phone breakpoint the three-column row switches to `flex-direction: column`, stacking Sandbox, Live, and Volume vertically at full width. Each card's column switches to `24_24` flex sizing. Section padding also reduces from 88px to 40px top and bottom. No content is hidden — all three plans remain visible.

What should I edit first after importing this section?

Start with the three plan names (h3 headings) and their price numerals — those drive the whole section's meaning. Then update the three feature rows per card to match your actual tier limits. Last, update the button link URLs. The fonts, colors, and spacing are ready to use as-is or adjust after the copy is finalized.

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.