# Testimonial stagger

> Two large-format client testimonials in equal 50/50 columns with an intentional vertical offset: the second column steps down significantly, creating a rhythmic descending cadence between two equally weighted voices, each with a portrait on its attribution hairline. States no colour and no font of its own.

Canonical: https://patternpaste.com/pattern/testimonial-stagger.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, quotes, reviews, duo, stagger, offset, two, social proof

## Variations (2)

### Staggered duo (the default)

Identical markup in every theme.

Two equal 50% columns on your page ground with a stepped vertical cadence: the right column drops down by several lines of reading height.

### Ruled seam

Identical markup in every theme.

A vertical currentColor hairline runs down the centre seam between the two staggered columns, accentuating the vertical step.


---

## The signature moment: the vertical offset between two equal voices

**The signature is the descending vertical cadence between two equally weighted
50% columns.** The second column is dropped by several lines of reading height
(`padding-top: clamp(3rem, 6vw, 6.5rem)`), so the eye moves naturally from the
first statement across and down to the second, avoiding the visual competition of
two large adjacent quotes.

This keeps the section distinct from the rest of the catalogue. `testimonial-lead-and-rail`
is an asymmetric 58/42 lead with a stacked secondary rail; `testimonial-trio` is three
bottom-aligned cards with ragged tops; `testimonial-metric` anchors a quote to a number.
This pattern provides a rhythmic pair of equal peers.

## What it inherits from your theme

- **The typeface.** No font family is stated anywhere. Both quotes inherit your
  theme's typography ladder.
- **Your colours.** The section uses `base` for the ground and `contrast` for text,
  with universal fallback guarantees.
- **The attribution rules.** Every hairline is `currentColor`, matching your text colour.
- **Your spacing scale.** Padding and block gaps draw on spacing presets.

## What it decides for itself

- **Full bleed with a 1240px container.** Spans the viewport while keeping reading
  columns to roughly 560px.
- **The vertical offset.** Steps the right column down by `clamp(3rem, 6vw, 6.5rem)`.
- **The quote ramp.** Set at `var(--wp--preset--font-size--large, clamp(1.25rem, 1.9vw, 1.6875rem))`
  with `1.45` line-height for confident reading.
- **A portrait on each attribution rule.** A 6rem square frame sits beside the name
  on the hairline under each quote. Because the columns are offset, the two
  faces land at different heights, so the step the composition is built on is
  drawn twice: once by the top of the quote and once by the face under it.
  Neither image states a colour.

## What a buyer changes first

1. **The two quotes.** Replace with two substantial customer or stakeholder quotes (35–55 words each).
2. **The attributions.** Edit the names, the roles and the two portraits. 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.
3. **The section eyebrow.** "Executive perspectives" can be renamed or deleted.

## The variation

- **Ruled seam** (`variations/ruled-seam.html`) adds a vertical `currentColor` hairline
  down the center seam between the two columns, accentuating the vertical step.

## Notes

- Core blocks only: group, columns, column, paragraph, image.
- Every colour is a fallback chain ending in universal presets.
- Text contrast is verified at 4.5:1 on all text pairs.