Testimonial ratings, Pattern Paste Canonical: https://patternpaste.com/pattern/testimonial-ratings.html Library (https://patternpaste.com/patterns/) Testimonials (https://patternpaste.com/patterns/testimonials/) Catalogue access Standard # Testimonial ratings A 6-item reflowing grid of customer reviews, each in a 1px currentColor card topped with a tracked star-rating badge on its own hairline, followed by a punchy review quote and the reviewer's portrait beside their credentials. States no colour and no font of its own. 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 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. 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. 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 copy (https://patternpaste.com/account/#plan) What you copy is yours forever. Cancel whenever. Back to the library (https://patternpaste.com/patterns/) Catalogue access ### £70 a year Save £50 Or £10 a month All patterns, variations and theme downloads. What you copy is yours forever. Cancel whenever. Start with three days of full access on sign-up, no card. Start free trial (https://patternpaste.com/account/#plan) Sign in (https://patternpaste.com/account/) Everything you copy is yours to keep, forever, on any site; access to the rest of the library runs while you subscribe. Cancel any time; access runs to the end of the period you have paid for, and there is no pro-rata refund. Prices are in pounds and are the full price in the UK, the US and eleven other countries; elsewhere the checkout adds your local VAT or sales tax. The terms name every country. #### Pair with Hero Hero aperture An opening section on your theme's own paper: a tracked line, a display headline, one short paragraph on a reading measure, and then a picture that stops short of the edge on every side. The signature is the margin: the image is a window cut in the page rather than a band across it, and the paper around it is what you notice. A small opaque plate in the picture's bottom-right corner carries the caption, so no type ever sits on the photograph. The still-image version includes an example photograph; select your own clip for the video version. States no colour and no font of its own. (https://patternpaste.com/pattern/hero-aperture.html)Stats Stat callout A high-impact framed spotlight plaque: a central marquee figure and bold executive statement sit above a ruled three-part corroboration shelf enclosed within the same 1px currentColor architectural frame. States no colour and no font of its own. (https://patternpaste.com/pattern/stat-callout.html)Pricing Pricing cover menu A screen-height cover with three plans set on it like a restaurant menu: a heavy veil of your theme's contrast colour over the photograph, a display headline in the lower left and a narrow ruled price list in the right-hand column, each plan a name and its price on one line and a sentence beneath, hairline rules between, one button under the list. The list drops beneath the headline on a phone. Includes a replaceable example photograph and placeholder prices. States no colour and no font of its own. Ships with a short hand-off row on your theme's paper below it. (https://patternpaste.com/pattern/pricing-cover-menu.html) #### Before you paste Requires a block theme on WordPress 6.7 to 7.0. Classic themes and page builders are outside our supported setup. Adaptive patterns use the block theme’s colour, spacing and typography presets; styled variations declare their own colours or type. How we test patterns (https://patternpaste.com/how-we-test/) Sample images stay in the copied blocks. Replace them in WordPress; pasting does not upload them to your Media Library. Video variations need your own clip. Image credits (https://patternpaste.com/image-credits/). #### What's inside Blocks group, image, paragraph Core only yes Chains 30, deepest 3 rungs currentColor yes color base, black, contrast, role-label, white spacing 50, 60, 80 font-size medium Continue exploring ## Next in Testimonials Explore all 11 Testimonials patterns (https://patternpaste.com/patterns/testimonials/) Shot in Twenty Twenty-Five Testimonials Testimonials Standard ### Testimonial portrait One client quote against one example upright portrait, two up on your page ground. 5 blocks · 1 variation Open preview (https://patternpaste.com/pattern/testimonial-portrait.html) Ruled foot (https://patternpaste.com/pattern/testimonial-portrait.html#variant=ruled-foot) Shot in Twenty Twenty-Five Testimonials Testimonials Standard ### Testimonial stagger Two large-format client testimonials in equal 50/50 columns with an intentional vertical offset: the second column steps down significantly, creating a rhythmic descending cadence between two equally weighted voices, each with a portrait on its attribution hairline. 5 blocks · 1 variation Open preview (https://patternpaste.com/pattern/testimonial-stagger.html) Ruled seam (https://patternpaste.com/pattern/testimonial-stagger.html#variant=ruled-seam) Shot in Twenty Twenty-Five Testimonials Testimonials Standard ### Testimonial statement An authoritative single-client quote set at display scale on a focused optical measure, framed between two currentColor hairlines with generous breathing room, the speaker's portrait opening the measure above the top rule and a three-column attribution row at its foot. 5 blocks · 1 variation Open preview (https://patternpaste.com/pattern/testimonial-statement.html) Night statement (https://patternpaste.com/pattern/testimonial-statement.html#variant=night-statement)