# Testimonial metric

> An outcome-driven testimonial section pairing a display-scale impact figure and context label on the left with an expansive client quote on the right, the client's portrait standing on the ruled attribution beneath it. States no colour and no font of its own.

Canonical: https://patternpaste.com/pattern/testimonial-metric.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: column, columns, group, image, paragraph
Keywords: testimonial, quote, metric, stat, outcome, social proof, results

## Variations (2)

### Metric anchor (the default)

Identical markup in every theme.

A 36/64 split on your page ground: the display metric anchors the left column while the full quote and attribution hairline run on the right.

### Inverted plate

Identical markup in every theme.

The metric column sits inside a dark contrast plate on your page ground, creating a high-density outcome block beside the client's quote.


---

## The signature moment: the outcome figure anchors the voice

**The metric figure is set at display scale in a 36% column, anchoring the entire
composition, while the quote runs expansive in the wide column beside it.** The
visitor reads the hard outcome first (+340%), then the editorial verdict that
explains how it happened, and finally the attribution on its hairline.

That is what separates it from the rest of the section. `testimonial-band` is an
inverted text-only statement; `testimonial-portrait` is a quote stepping down to
a photograph; `testimonial-trio` is three bottom-aligned cards. This one is the
only pattern in the section that pairs quantified telemetry directly with a client
voice.

## What it inherits from your theme

- **The typeface.** No font family is stated anywhere, including on the giant metric.
  It renders in your theme's primary face.
- **Your colours.** The ground asks for `base` and the text for `contrast`, both
  behind fallback chains that end on a colour WordPress guarantees.
- **The attribution hairline.** It is `currentColor`, matching your text colour
  across all themes.
- **Your spacing scale.** Padding and block gaps use spacing presets, scaling
  with your theme's typography scale.

## What it decides for itself

- **Full bleed with its own 1240px container.** Spans the viewport while keeping
  line lengths comfortable.
- **The 36/64 column ratio.** Balances the oversized stat figure with a generous
  measure for the client quote.
- **The display metric.** `clamp(3.5rem, 6.5vw, 5.5rem)` with `line-height: 1`
  and tight tracking so the figure sits compact and punchy.
- **The quote ramp.** Set at `var(--wp--preset--font-size--large, clamp(1.25rem, 1.85vw, 1.6875rem))`
  with a 1.45 line-height so it reads as a strong editorial statement.
- **One portrait, on the attribution rule.** A 6.5rem square frame sits beside the
  name on the hairline under the quote. It is deliberately the second face of
  the section after the figure: the number is still the picture, and the
  portrait is what makes the number somebody's. It states no colour, so the
  Inverted plate variation is unaffected.

## What a buyer changes first

1. **The metric and its label.** Change `+340%` and the context label beneath it
   to reflect your customer's measured outcome.
2. **The quote.** 40 to 65 words is optimal for the 64% column measure.
3. **The attribution.** Replace Elena Rostova, the title/organisation line and
   the portrait beside them. 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 eyebrow.** "Proven outcomes" is an uppercase label paragraph. Edit or delete it.

## The variation

- **Inverted plate** (`variations/inverted-plate.html`) puts the metric inside a
  dark `contrast` plate with `base` type, giving strong tonal separation between
  the outcome number and the customer quote.

## Notes

- Core blocks only: group, columns, column, paragraph, image. No scripts or custom CSS.
- Every color is a fallback chain ending in universal presets.
- The stat figure is display-sized and judged at 3:1 contrast; all body and attribution
  text is judged at 4.5:1.

## Display type

Off the theme's ladder on purpose, because the size is the composition:
- paragraph at clamp(3.5rem, 6.5vw, 5.5rem)