Reviews score summary, Pattern Paste Canonical: https://patternpaste.com/pattern/reviews-score-summary.html Core Patterns (https://patternpaste.com/patterns/) Testimonials (https://patternpaste.com/patterns/testimonials/) Free Standard # 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 Search patterns Loading patterns… 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. Back to Core Patterns (https://patternpaste.com/patterns/) ### Free pattern Copy it and paste it straight into the block editor. It is yours to keep and edit. Its Styled looks come with a subscription. Read the markup Catalogue access ### £119 a year All patterns, variations and theme downloads. What you copy is yours forever. Cancel whenever. Subscribe, £119 a year (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 Donate impact tiers Four donation cards for a charity, each amount set at display size over what it pays for, one plain line of how, and a Donate button on the foot. The third card is inverted as the most given gift, and a note under the cards carries the charity number, Gift Aid and a link to give another amount. States no colour and no font of its own. (https://patternpaste.com/pattern/donate-impact-tiers.html) #### Before you paste 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. How we test patterns (https://patternpaste.com/how-we-test/) ## Specifications Section Testimonials Access Free Plugin None, core blocks only Variations 2 Colour From your theme or its own palette Type From your theme or its own type Motion None Blocks button, buttons, column, columns, group, heading, paragraph Presets color 6, spacing 6, font-size 1 WordPress 7.0+ Continue exploring ## Next in Testimonials Explore all 15 Testimonials patterns (https://patternpaste.com/patterns/testimonials/) Shot in Twenty Twenty-Five Testimonials No 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. Testimonials Preview pattern (https://patternpaste.com/pattern/quote-wall.html) Shot in Twenty Twenty-Five Testimonials No 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. Testimonials Preview pattern (https://patternpaste.com/pattern/testimonial-band.html) Shot in Twenty Twenty-Five Testimonials No 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. Testimonials Preview pattern (https://patternpaste.com/pattern/testimonial-cover-quote.html)