Dark Infrastructure Testimonial Layout for Divi 5: Single Card

Testimonials SaaS Dark

A dark, developer-focused single testimonial card for infrastructure and SaaS products. Features Space Grotesk headings, JetBrains Mono quote text, and a dashed-border card on a near-black background.

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 single-card testimonial section opens on a #0b0d0c background, a near-black with a just-perceptible green undertone that keeps the dark from reading as neutral or generic. That tonal choice is deliberate: the same palette logic you find in terminal emulators, observability dashboards, and infrastructure control panels. The testimonial card itself sits on #131715, a fractionally lighter dark that creates quiet depth through tone alone before the eye reaches the 1px dashed #2a312d border tracing the card edge. Depth without contrast shock, separation without a hard line.

The heading uses Space Grotesk at 48px desktop with -1px letter-spacing and 70px line-height, condensed and authoritative at the #e8ece9 near-white that anchors the section's primary text tier. That heading copy ("From the on-call rota") is aimed squarely at buyers who recognize on-call culture as a signal of a serious SaaS product. At tablet and phone breakpoints it drops to 36px with a 42px line-height and stays centered, max-constrained at 810px. The quote body runs in JetBrains Mono, a deliberate monospace choice that signals code, terminals, and infrastructure without any additional visual treatment, landing immediately for devops and platform tool audiences.

The divi/testimonial module carries all four author fields: name, job title, company, and portrait image. Author name and quote text use #e8ece9, a near-white with a faint sage cast. Job title and company step back to #8d9892, a muted sage-grey that reads as clearly secondary without disappearing. The card sits on a 2px border-radius with the 1px dashed border visible on the dark ground while staying understated. The overall effect is a card that has presence through tone, not weight.

On mobile the section vertical padding is zeroed so the card integrates cleanly into whatever spacing the surrounding layout provides. The row is set to column flex direction, meaning additional testimonial cards added later stack without any further configuration. The current build is one heading, one card, no decorative elements, keeping load weight minimal and breakpoints fully predictable.

What’s inside

Full-width single-column layout (section > row > column) with a `testimonials` CSS ID pre-set for anchor linking from nav or CTAs
`divi/heading` module: Space Grotesk, 600 weight, 48px desktop with -1px letter-spacing, scales to 36px at tablet and phone, centered and max-width 810px
`divi/testimonial` module with all four fields populated: author name, job title, company, and portrait image slot
Card styled with `#131715` background, 1px dashed `#2a312d` border, and 2px border-radius against the `#0b0d0c` section ground
JetBrains Mono body font on the quote text, reinforcing a developer and infrastructure brand tone
Two-tier color hierarchy: `#e8ece9` near-white for quote and author name, `#8d9892` muted sage for job title and company
Mobile-ready: section vertical padding zeroed on phone, row shifts to column flex direction for clean stacking of additional cards

Who it’s for

The strongest fit is SaaS products in the infrastructure, devops, monitoring, alerting, cloud platform, or developer tooling space. The JetBrains Mono quote font and on-call framing make a direct appeal to technical buyers, so the layout works best when the testimonial voice is an engineer, principal, or CTO rather than a marketing persona. It also suits cybersecurity platforms, CI/CD tools, observability software, and any B2B SaaS where the buyer is a technical decision-maker who would recognize and respect a terminal-style aesthetic. Less suited to consumer-facing, lifestyle, or non-technical products.

Customization tips

The palette is the most direct lever. Swap #0b0d0c on the section and #131715 on the card to any other dark pair, adjusting the dashed border color #2a312d in the card border settings to match. To invert to a light scheme, replace both background values with near-whites and shift text colors to dark. The heading font (Space Grotesk) is set at the module level, not a global preset, so it can be changed without affecting the rest of your site. Keep heading copy under around 40 characters to hold a single centered line at desktop widths; longer copy wraps and the spacing may feel loose. The JetBrains Mono quote font is also set at module level and can be replaced with any Google Font. Portrait images display best at a square (1:1) crop. The Pexels URL in the portrait field is a placeholder; replace it with a hosted image before going live.

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 Dark Infrastructure Testimonial Layout for Divi 5: Single Card

How does the heading behave at tablet and phone sizes?

The heading drops from 48px to 36px with a 42px line-height at both tablet and phone breakpoints. It stays centered and keeps its 810px max-width constraint, so on narrower screens it simply shortens without shifting alignment or losing the centered layout.

Why is the quote body set in JetBrains Mono?

It is a deliberate typographic signal for infrastructure and developer-tool audiences. JetBrains Mono reads as terminal and code without needing any supporting graphic treatment. For devops, monitoring, or platform tool brands that framing lands immediately. If your brand calls for something warmer, the font is set at the testimonial module's body font level and can be swapped to any Google Font without touching anything else.

Is the portrait image included or do I supply my own?

The portrait field references a Pexels stock photo URL used for preview purposes only. Before publishing, replace it with a hosted image in your media library or Vercel Blob storage. The module accepts any image URL; a square crop works best with Divi's testimonial portrait display.

Can I add more testimonial cards to this section?

Yes. Duplicate the `divi/testimonial` module inside the existing column to stack cards vertically, or add columns to the row to place them side by side at desktop. The row is already set to column flex on phone, so any additional cards will stack cleanly on small screens without extra configuration.

What is the first thing to edit after importing?

Replace the portrait image URL with your own hosted photo, update the author name, job title, company, and quote text to real customer copy, and adjust the heading to match your brand voice. The palette and fonts can stay as-is for the infrastructure aesthetic or be swapped as described in the customization notes.

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.