# Testimonial lead and rail

> An asymmetric two-column section with a 58/42 split: an expansive featured client quote on the left under a large portrait on its attribution rule, counterweighted by a vertical stack of two compact peer testimonials on the right, each with a small portrait, separated by a currentColor hairline. States no colour and no font of its own.

Canonical: https://patternpaste.com/pattern/testimonial-lead-and-rail.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, social proof, lead, rail, asymmetric

## Variations (2)

### Featured lead (the default)

Identical markup in every theme.

A 58/42 layout on your page ground: one expansive lead testimonial paired with a compact two-quote stack on the right rail.

### Ruled cards

Identical markup in every theme.

The two rail entries are framed in 1px currentColor cards, giving defined structure to the right column beside the open lead quote.


---

## The signature moment: one dominant voice beside two stacked peers

**The signature is the density contrast between the expansive 58% lead column and
the stacked 42% rail.** The lead quote is set large across a wide measure with its
attribution anchored to a full-width rule, while the right rail stacks two concise
peer reviews separated by a `currentColor` hairline.

This keeps the section distinct from the rest of the catalogue. `testimonial-band`
is a single statement across full bleed; `testimonial-trio` is three bottom-aligned
cards of equal width; `testimonial-metric` anchors a quote against a giant number.
This pattern provides hierarchy across multiple testimonials on one row.

## What it inherits from your theme

- **The typeface.** No font family is stated anywhere. All text renders in your
  theme's typography.
- **Your colours.** The section uses `base` for ground and `contrast` for text,
  each with universal fallbacks.
- **The hairlines.** Every rule 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 edge-to-edge while keeping reading
  measures comfortable.
- **The 58/42 column split.** Gives the lead quote enough breadth to carry display-scale
  type while leaving room for a two-card vertical rail.
- **The lead quote ramp.** `var(--wp--preset--font-size--large, clamp(1.375rem, 2.2vw, 1.875rem))`
  with `1.42` line-height.
- **The rail ramp.** `var(--wp--preset--font-size--medium, clamp(1.0625rem, 1.25vw, 1.1875rem))`
  with `1.5` line-height for readability in compact measures.
- **Three portraits, sized by rank, measured by the face and not the frame.**
  The lead attribution carries an 8.5rem 4/5 frame on its hairline, tall enough
  to hold a waist-up photograph; each rail entry carries a 3.75rem SQUARE
  head-and-shoulders chip beside its name, because at that size a waist-up
  frame is a torso. The two sizes are set against each other rather than chosen
  separately: a square head crop fills its frame with a face, so an earlier
  7rem lead beside 4.75rem chips gave the FEATURED voice the smallest head on
  the page. Rank has to read in the faces, not the rectangles.
  The size difference is the hierarchy said a second way, so the lead reads as
  the lead even with the quotes covered. An image states no colour, so the
  section's inherited colour promise is untouched.

## What a buyer changes first

1. **The lead quote.** Replace with your strongest executive or customer soundbite (30–50 words).
2. **The two rail quotes.** Replace with shorter, punchier secondary quotes (15–25 words each).
3. **The names and titles.** Edit the three attribution blocks.
4. **The three portraits.** Swap them for the people who said it. The lead is a
   4/5 frame and takes a waist-up photograph; the two rail chips are square and
   want a head-and-shoulders one. Both are covered from the centre, so a head
   sitting low in the frame loses its crown. If you resize them, keep the lead's
   FACE larger than the rail's, not just its frame.
5. **The section eyebrow.** "Voices from the field" can be renamed or deleted.

## The variation

- **Ruled cards** (`variations/ruled-cards.html`) wraps the two rail entries in
  discrete 1px `currentColor` bordered cards, giving box structure to the rail.

## Notes

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