# 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.

Canonical: https://patternpaste.com/pattern/reviews-score-summary.html
Section: Testimonials
Access: Free, and free to keep.
Needs: 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.
Blocks: button, buttons, column, columns, group, heading, paragraph
Keywords: reviews, rating, score, stars, testimonials, social proof, clinic, local business

## Variations (2)

### Score and three (the default)

Identical markup in every theme.

Your base ground and contrast type; the score is display size in your typeface and the three reviews sit between currentColor rules.

### Sand and teal

This variation states its own colours and states its own type: identical in every theme.

A dental or physio clinic look: states warm sand, deep teal-green type and a teal score and stars, set throughout in Avenir Next.


---

## 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.

## 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.

## 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.

## What to change first

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