Pattern Paste
Subscribe

Core Patterns Testimonials

FreeStandard

Reviews score summary

A review summary for a local business.

The average score is set at poster size in the left column, with a row of text stars, a heading giving the review count and one line on where the reviews come from, then a Read all reviews link. Opposite it three short reviews run down a ruled list, each a quote at reading size above the reviewer and the month. No rating widget and no script: the score and the count are plain text you edit. States no colour and no font of its own.

All patterns

Loading patterns…

Look: Score and three
ThemePreview size
Twenty Twenty-Five·1280px

Manrope typefacergb(255, 255, 255) ground1280px viewport

Start here

What to change first

The score, the review count, the source line, the three reviews and the link to wherever your full reviews live.

The signature moment

The score answers before a review is read

One figure at poster size beside three reviews at reading size. The "4.9" is a bare clamp(7rem, 16vw, 15rem) with tight leading, the largest thing on the section by a factor of five, so a visitor has the verdict before they reach a single sentence. The reviews are the second mass, set at clamp(1.25rem, 1.8vw, 1.625rem) between rules, so they read as the evidence for the number rather than as a wall of quotes. The move survives colourlessness because it is scale collision and rule, not colour.

Theme handoff

What comes from where

From your theme

  • The ground is base and every line of type is contrast, each a two-rung chain, so text is at 4.5:1 or better in the stock themes.
  • The label starts on role-label and the link on role-link, both falling through to contrast.
  • The rules are currentColor.
  • The score and the heading are off the type ladder on purpose: their size is the composition. Body copy takes medium. The typeface is your theme's.
  • The stars are the text character, so they take your contrast colour.

Set by this pattern

  • Two columns, 42 and 58 per cent, stacking below 782px with the score first.
  • The Read all reviews link is a transparent button with 0.75rem of padding top and bottom, so it is a full tap target on a phone.

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 review summary for a clinic, a trade or a restaurant. The average score holds the left column at poster size, with a row of stars, the review count as the heading, one line on where the reviews come from and a Read all reviews link. Opposite it three short reviews run down a ruled list.

The signature moment: the score answers before a review is read

One figure at poster size beside three reviews at reading size. The "4.9" is a bare clamp(7rem, 16vw, 15rem) with tight leading, the largest thing on the section by a factor of five, so a visitor has the verdict before they reach a single sentence. The reviews are the second mass, set at clamp(1.25rem, 1.8vw, 1.625rem) between rules, so they read as the evidence for the number rather than as a wall of quotes. The move survives colourlessness because it is scale collision and rule, not colour.

Make it yoursVariations and the edits to make first

What to change first

The score, the review count, the source line, the three reviews and the link to wherever your full reviews live.

Theme behaviourInheritance, fixed decisions and contrast

What it inherits from your theme

  • The ground is base and every line of type is contrast, each a two-rung chain, so text is at 4.5:1 or better in the stock themes.
  • The label starts on role-label and the link on role-link, both falling through to contrast.
  • The rules are currentColor.
  • The score and the heading are off the type ladder on purpose: their size is the composition. Body copy takes medium. The typeface is your theme's.
  • The stars are the text character, so they take your contrast colour.

What it decides for itself

  • Two columns, 42 and 58 per cent, stacking below 782px with the score first.
  • The Read all reviews link is a transparent button with 0.75rem of padding top and bottom, so it is a full tap target on a phone.
Technical notesBlock mechanics, responsive behaviour and constraints

The Styled look

sand-and-teal states warm sand #f3ece1, deep teal-green #16312f type and rules, and the score, stars and the first rule in teal #1f6f6a (5.1:1 on the sand), set throughout in Avenir Next. It is for a dental practice, a physio or a clinic that wants to look calm and careful.

Questions

Reviews score summary: common questions

Does Reviews score summary need a plugin?

No. It is built only from core WordPress blocks (button, buttons, column, columns, group, heading and paragraph), so it pastes into the block editor with nothing to install.

Will Reviews score summary match my theme?

Choose by variation. Score and three takes your theme’s palette; Sand and teal brings its own colours.

How many variations does Reviews score summary have?

2: Score and three and Sand and teal. Each is its own markup; choose one in the toolbar above the preview before you copy.

Is Reviews score summary free?

Yes. It is one of 56 free Core Patterns: copy it and it is yours to keep and edit. Its Styled looks come with a subscription.

Which WordPress version does it need?

Requires a block theme on WordPress 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.

The markup

Core block markup and nothing else. Copy it, then paste it straight into the block editor: WordPress reads the delimiters and rebuilds the blocks. This is the file as authored; the copy button on the stage applies the finish you chose there.

12,860 bytes 
<!-- wp:group {"align":"full","style":{"color":{"background":"var(--wp--preset--color--base, var(--wp--preset--color--white))","text":"var(--wp--preset--color--contrast, var(--wp--preset--color--black))"},"spacing":{"padding":{"top":"var:preset|spacing|80","right":"clamp(1.25rem, 4vw, 4rem)","bottom":"var:preset|spacing|80","left":"clamp(1.25rem, 4vw, 4rem)"}}},"layout":{"type":"constrained","contentSize":"1240px"}} -->
<div class="wp-block-group alignfull has-text-color has-background" style="color:var(--wp--preset--color--contrast, var(--wp--preset--color--black));background-color:var(--wp--preset--color--base, var(--wp--preset--color--white));padding-top:var(--wp--preset--spacing--80);padding-right:clamp(1.25rem, 4vw, 4rem);padding-bottom:var(--wp--preset--spacing--80);padding-left:clamp(1.25rem, 4vw, 4rem)"><!-- wp:columns {"verticalAlignment":"top","style":{"spacing":{"blockGap":{"top":"var:preset|spacing|60","left":"var:preset|spacing|70"}}}} -->
<div class="wp-block-columns are-vertically-aligned-top"><!-- wp:column {"verticalAlignment":"top","width":"42%"} -->
<div class="wp-block-column is-vertically-aligned-top" style="flex-basis:42%"><!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--role-label, var(--wp--preset--color--contrast, var(--wp--preset--color--black)))"},"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"clamp(0.875rem, 1vw, 0.9375rem)","fontWeight":"600","letterSpacing":"0.16em","textTransform":"uppercase"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--role-label, var(--wp--preset--color--contrast, var(--wp--preset--color--black)));margin-top:0;margin-bottom:0;font-size:clamp(0.875rem, 1vw, 0.9375rem);font-weight:600;letter-spacing:0.16em;text-transform:uppercase">Patient reviews</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--contrast, var(--wp--preset--color--black))"},"spacing":{"margin":{"top":"var:preset|spacing|40","bottom":"0"}},"typography":{"fontSize":"clamp(7rem, 16vw, 15rem)","letterSpacing":"-0.04em","lineHeight":"0.85"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--contrast, var(--wp--preset--color--black));margin-top:var(--wp--preset--spacing--40);margin-bottom:0;font-size:clamp(7rem, 16vw, 15rem);letter-spacing:-0.04em;line-height:0.85">4.9</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--contrast, var(--wp--preset--color--black))"},"spacing":{"margin":{"top":"var:preset|spacing|30","bottom":"0"}},"typography":{"fontSize":"clamp(1.5rem, 2.2vw, 2rem)","letterSpacing":"0.12em","lineHeight":"1"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--contrast, var(--wp--preset--color--black));margin-top:var(--wp--preset--spacing--30);margin-bottom:0;font-size:clamp(1.5rem, 2.2vw, 2rem);letter-spacing:0.12em;line-height:1">★★★★★</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"style":{"color":{"text":"var(--wp--preset--color--contrast, var(--wp--preset--color--black))"},"spacing":{"margin":{"top":"var:preset|spacing|40","bottom":"0"}},"typography":{"fontSize":"clamp(1.75rem, 3.2vw, 3rem)"}}} -->
<h2 class="wp-block-heading has-text-color" style="color:var(--wp--preset--color--contrast, var(--wp--preset--color--black));margin-top:var(--wp--preset--spacing--40);margin-bottom:0;font-size:clamp(1.75rem, 3.2vw, 3rem)">from 212 reviews</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--contrast, var(--wp--preset--color--black))"},"spacing":{"margin":{"top":"var:preset|spacing|40","bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--medium, clamp(1rem, 1.1vw, 1.125rem))","lineHeight":"1.6"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--contrast, var(--wp--preset--color--black));margin-top:var(--wp--preset--spacing--40);margin-bottom:0;font-size:var(--wp--preset--font-size--medium, clamp(1rem, 1.1vw, 1.125rem));line-height:1.6">Every review since we opened in 2014, gathered by an independent service and published as written, the three-star ones included.</p>
<!-- /wp:paragraph -->

<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"left"},"style":{"spacing":{"margin":{"top":"var:preset|spacing|30","bottom":"0"}}}} -->
<div class="wp-block-buttons" style="margin-top:var(--wp--preset--spacing--30);margin-bottom:0"><!-- wp:button {"url":"#reviews","style":{"color":{"background":"transparent","text":"var(--wp--preset--color--role-link, var(--wp--preset--color--contrast, var(--wp--preset--color--black)))"},"spacing":{"padding":{"top":"0.75rem","bottom":"0.75rem","left":"0px","right":"0px"}},"typography":{"fontWeight":"600","textDecoration":"underline"}}} -->
<div class="wp-block-button"><a class="wp-block-button__link has-text-color has-background wp-element-button" href="#reviews" style="color:var(--wp--preset--color--role-link, var(--wp--preset--color--contrast, var(--wp--preset--color--black)));background-color:transparent;padding-top:0.75rem;padding-right:0px;padding-bottom:0.75rem;padding-left:0px;font-weight:600;text-decoration:underline">Read all reviews</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"top","width":"58%"} -->
<div class="wp-block-column is-vertically-aligned-top" style="flex-basis:58%"><!-- wp:group {"style":{"border":{"bottom":{"color":"currentColor","style":"solid","width":"1px"}},"spacing":{"blockGap":"0"}},"layout":{"type":"default"}} -->
<div class="wp-block-group" style="border-bottom-color:currentColor;border-bottom-style:solid;border-bottom-width:1px"><!-- wp:group {"style":{"border":{"top":{"color":"currentColor","style":"solid","width":"1px"}},"spacing":{"padding":{"top":"var:preset|spacing|40","bottom":"var:preset|spacing|40"},"blockGap":"var:preset|spacing|30"}},"layout":{"type":"default"}} -->
<div class="wp-block-group" style="border-top-color:currentColor;border-top-style:solid;border-top-width:1px;padding-top:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40)"><!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--contrast, var(--wp--preset--color--black))"},"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"clamp(1.25rem, 1.8vw, 1.625rem)","lineHeight":"1.4"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--contrast, var(--wp--preset--color--black));margin-top:0;margin-bottom:0;font-size:clamp(1.25rem, 1.8vw, 1.625rem);line-height:1.4">I had avoided the dentist for eleven years. Dr Okafor talked me through every step, I felt nothing, and I booked my next check-up on the way out.</p>
<!-- /wp:paragraph -->

<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|20"}},"layout":{"type":"flex","flexWrap":"wrap","justifyContent":"space-between"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--contrast, var(--wp--preset--color--black))"},"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"clamp(0.875rem, 1vw, 0.9375rem)","fontWeight":"600","letterSpacing":"0.04em"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--contrast, var(--wp--preset--color--black));margin-top:0;margin-bottom:0;font-size:clamp(0.875rem, 1vw, 0.9375rem);font-weight:600;letter-spacing:0.04em">Sarah P., Ilkley</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--contrast, var(--wp--preset--color--black))"},"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"clamp(0.875rem, 1vw, 0.9375rem)","fontWeight":"600","letterSpacing":"0.04em"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--contrast, var(--wp--preset--color--black));margin-top:0;margin-bottom:0;font-size:clamp(0.875rem, 1vw, 0.9375rem);font-weight:600;letter-spacing:0.04em">★★★★★ August 2026</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

<!-- wp:group {"style":{"border":{"top":{"color":"currentColor","style":"solid","width":"1px"}},"spacing":{"padding":{"top":"var:preset|spacing|40","bottom":"var:preset|spacing|40"},"blockGap":"var:preset|spacing|30"}},"layout":{"type":"default"}} -->
<div class="wp-block-group" style="border-top-color:currentColor;border-top-style:solid;border-top-width:1px;padding-top:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40)"><!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--contrast, var(--wp--preset--color--black))"},"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"clamp(1.25rem, 1.8vw, 1.625rem)","lineHeight":"1.4"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--contrast, var(--wp--preset--color--black));margin-top:0;margin-bottom:0;font-size:clamp(1.25rem, 1.8vw, 1.625rem);line-height:1.4">Rang at nine on a Saturday with a cracked molar and was seen by ten. Sorted in forty minutes, and the bill was exactly what they quoted.</p>
<!-- /wp:paragraph -->

<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|20"}},"layout":{"type":"flex","flexWrap":"wrap","justifyContent":"space-between"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--contrast, var(--wp--preset--color--black))"},"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"clamp(0.875rem, 1vw, 0.9375rem)","fontWeight":"600","letterSpacing":"0.04em"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--contrast, var(--wp--preset--color--black));margin-top:0;margin-bottom:0;font-size:clamp(0.875rem, 1vw, 0.9375rem);font-weight:600;letter-spacing:0.04em">Tom W., Burley</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--contrast, var(--wp--preset--color--black))"},"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"clamp(0.875rem, 1vw, 0.9375rem)","fontWeight":"600","letterSpacing":"0.04em"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--contrast, var(--wp--preset--color--black));margin-top:0;margin-bottom:0;font-size:clamp(0.875rem, 1vw, 0.9375rem);font-weight:600;letter-spacing:0.04em">★★★★★ July 2026</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

<!-- wp:group {"style":{"border":{"top":{"color":"currentColor","style":"solid","width":"1px"}},"spacing":{"padding":{"top":"var:preset|spacing|40","bottom":"var:preset|spacing|40"},"blockGap":"var:preset|spacing|30"}},"layout":{"type":"default"}} -->
<div class="wp-block-group" style="border-top-color:currentColor;border-top-style:solid;border-top-width:1px;padding-top:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40)"><!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--contrast, var(--wp--preset--color--black))"},"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"clamp(1.25rem, 1.8vw, 1.625rem)","lineHeight":"1.4"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--contrast, var(--wp--preset--color--black));margin-top:0;margin-bottom:0;font-size:clamp(1.25rem, 1.8vw, 1.625rem);line-height:1.4">Both our children now ask when they are going back. The hygienist made a game of it and never once rushed them.</p>
<!-- /wp:paragraph -->

<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|20"}},"layout":{"type":"flex","flexWrap":"wrap","justifyContent":"space-between"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--contrast, var(--wp--preset--color--black))"},"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"clamp(0.875rem, 1vw, 0.9375rem)","fontWeight":"600","letterSpacing":"0.04em"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--contrast, var(--wp--preset--color--black));margin-top:0;margin-bottom:0;font-size:clamp(0.875rem, 1vw, 0.9375rem);font-weight:600;letter-spacing:0.04em">Priya and Dev M., Otley</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--contrast, var(--wp--preset--color--black))"},"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"clamp(0.875rem, 1vw, 0.9375rem)","fontWeight":"600","letterSpacing":"0.04em"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--contrast, var(--wp--preset--color--black));margin-top:0;margin-bottom:0;font-size:clamp(0.875rem, 1vw, 0.9375rem);font-weight:600;letter-spacing:0.04em">★★★★★ June 2026</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->
Back to Core Patterns

Continue exploring

Next in Testimonials

Explore all 15 Testimonials patterns

Quote wall rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveTestimonialsNo plugin needed

Quote wall

Eight short testimonials at reading size in three columns of unequal width, three, two and three, each quote hanging under a currentColor hairline with a small portrait and its name tracked beneath it, eight distinct faces.

TestimonialsPreview pattern
Testimonial band rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveTestimonialsNo plugin needed

Testimonial band

One client quote on a full-bleed inverted band: an oversized opening quotation mark hangs in its own margin column while the quote itself runs the full width of the band, and the attribution sits on a currentColor hairline beneath it, the speaker's portrait beside the name tracked wide at one end and the role at the other.

TestimonialsPreview pattern
Testimonial cover quote rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveTestimonialsNo plugin needed

Testimonial cover quote

A full-bleed cover where one client quotation is set at display size across the whole photograph, under a heavy veil of your theme's contrast colour, with the name and role on a small paper plate in the lower right corner.

TestimonialsPreview pattern