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

Canonical: https://patternpaste.com/pattern/testimonial-ratings.html
Section: Testimonials
Access: Included in Pattern Paste access.
Needs: 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.
Blocks: group, image, paragraph
Keywords: testimonial, ratings, reviews, stars, scorecard, social proof, grid, cards, six

## Variations (2)

### Bordered scorecard (the default)

Identical markup in every theme.

Six 1px currentColor bordered cards in a reflowing grid, each anchored by a 5.0 rating badge and hairline.

### Open columns

Identical markup in every theme.

The card boxes come off, so each review hangs cleanly from its top rating badge and hairline across reflowing open columns.


---

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

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

## What a buyer changes first

1. **The six quotes.** Replace with short, punchy customer reviews (15–30 words each).
2. **The rating badges.** Modify the badge text (`★ 5.0 / 5.0`, `G2 REVIEW`, `VERIFIED BUYER`, etc.).
3. **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.
4. **The section eyebrow.** "Customer reviews" is a paragraph label you can edit or remove.

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

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