Testimonial ratings, Pattern Paste

The signature moment

The rating badge anchored above the hairline

The signature is the structural rating badge sitting atop a full-card hairline. Each review opens with a concise proof score (★ 5.0 / 5.0) in small uppercase tracking, separated by a currentColor rule from the quote and attribution below. The six cards form a clean 3-across or 2-across grid that reflows gracefully on smaller screens.

Theme handoff

What comes from where

From your theme

The typeface.
Your colours.
The borders and hairlines.
Your spacing scale.

Set by this pattern

Full bleed with a 1240px container.
The 6-item reflowing grid.
The card typography ramp.
The 1px hairline rules.
A reviewer's face in every card foot.

Full pattern notes

Why it works, and how it is built

Open a topic for the complete design reasoning, editing guidance and implementation notes.

Design rationaleComposition, intent and nearest alternatives

Overview

A modular grid of six customer reviews, each anchored by a tracked rating badge and a structural hairline. Built for high-velocity trust building on pricing, product, and conversion pages.

The signature moment: the rating badge anchored above the hairline

This design differs distinctly from other patterns in the section. quote-wall is an unequal 8-quote masonry wall; testimonial-trio is three bottom-aligned cards with ragged tops; testimonial-lead-and-rail is an asymmetric lead/rail split. This pattern delivers a structured, quantifiable 6-item review matrix.

Make it yoursVariations and the edits to make first

The variation

Open columns (variations/open-columns.html) removes the outer card boxes, letting each review hang cleanly from its top rating badge and hairline.

Theme behaviourInheritance, fixed decisions and contrast

What it inherits from your theme

The typeface. No font family is stated anywhere. The quotes and badges take your theme's fonts.
Your colours. Ground uses base and text uses contrast, falling back safely to white and black.
The borders and hairlines. Every border is currentColor, adhering to the text ink.
Your spacing scale. Padding and grid gaps draw on spacing presets.

What it decides for itself

Full bleed with a 1240px container. Spans the screen while holding card measures tight.
The 6-item reflowing grid. Uses a CSS grid layout with a 19rem minimum column width to automatically reflow from 3 columns down to 2 and 1 without awkward stretching.
The card typography ramp. Quotes are set at var(--wp--preset--font-size--medium, clamp(1.0625rem, 1.2vw, 1.1875rem)) with 1.5 line-height.
The 1px hairline rules. Separate rating metadata from review copy and attribution.
A reviewer's face in every card foot. A 4.75rem square frame sits beside the name and role, which is the convention a rated review is read with: a score nobody's face stands behind is a number. Six distinct portraits, one per card, and none of them states a colour.

Technical notesBlock mechanics, responsive behaviour and constraints

What a buyer changes first

The six quotes. Replace with short, punchy customer reviews (15–30 words each).
The rating badges. Modify the badge text (★ 5.0 / 5.0, G2 REVIEW, VERIFIED BUYER, etc.).
The names, roles and portraits. Edit the attribution lines in each card and swap the six faces. It is a square crop of a head-and-shoulders photograph, not a centre crop of a full-length one: a waist-up frame squared from the middle loses the crown of the head and reads as a torso at this size.
The section eyebrow. "Customer reviews" is a paragraph label you can edit or remove.

Notes

Core blocks only: group, paragraph, image.
Every colour is a fallback chain ending in universal presets.
Text contrast is verified at 4.5:1 on all text pairs.

The markup

26KB of core-block markup, 3 blocks (group, image, paragraph), and nothing else: paste it into the block editor and it becomes editable blocks wearing your theme.

Start free trial to copyWhat you copy is yours forever. Cancel whenever.