Dark Software Reviews Testimonial Slider Layout for Divi 5: Three Quotes

This section opens on a deep navy canvas (#0b1020) with a deliberate asymmetric split: the left column carries the heading block (one-third of the row width on desktop), and the right column holds a wider slider card (two-thirds). The imbalance is intentional — it signals that the social proof is the primary object, not an afterthought. The section padding steps down from 100px on desktop to 72px on tablet and 48px on mobile, keeping the breathing room proportional rather than uniform.

The typography works on two registers. The eyebrow label — "In their words" — sits at 13px Inter, 500 weight, 2px letter-spacing in muted slate (#9aa4c0). Below it, the H2 headline renders at 44px / −1px tracking / weight 700 in near-white (#f2f4fa), with text-wrap: balance keeping line breaks clean at any column width. That contrast between whisper-quiet label and loud headline is the primary visual hierarchy before the slider even comes into focus.

The slider card itself sits on a slightly lighter dark surface (#151c33) with a 24px border-radius and a subtle 1px border in indigo-grey (#2a3558). Overflow is hidden, which keeps slide transitions inside the rounded container. Each slide quote renders at 26px / 1.45em line-height in #f2f4fa — large enough to read as a pull-quote — while the attribution line uses the same 13px/uppercase/2px-spacing treatment as the eyebrow, creating a visual echo between the label column and the slide metadata. Arrow controls are white; dot navigation fills with #f2f4fa to stay visible against the dark card.

On phone, the row switches to flex-direction: column, stacking the heading block above the slider. Both columns go full-width (24/24 flex), and the headline drops to 30px to prevent overflow. Slider quote text steps down to 19px. The result is a single-column reading flow that keeps all three testimonials accessible via swipe, with no content truncated or hidden.