Testimonial lead and rail, Pattern Paste Canonical: https://patternpaste.com/pattern/testimonial-lead-and-rail.html Library (https://patternpaste.com/patterns/) Testimonials (https://patternpaste.com/patterns/testimonials/) Catalogue access Standard # 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. 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. Theme handoff ## What comes from where ### From your theme - The typeface. - Your colours. - The hairlines. - Your spacing scale. ### Set by this pattern - Full bleed with a 1240px container. - The 58/42 column split. - The lead quote ramp. - The rail ramp. - Three portraits, sized by rank, measured by the face and not the frame. Full pattern notes ## Why it works, and how it is built Open a topic for the complete design reasoning, editing guidance and implementation notes. Design rationaleComposition, intent and nearest alternatives ### Overview One expansive featured testimonial paired with a compact stack of two peer reviews. It is designed for editorial balance: a primary customer quote takes the lead with breathing room on the left, while two fast supporting voices stack in a structured rail on the right. ### 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. Make it yoursVariations and the edits to make first ### 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. Theme behaviourInheritance, fixed decisions and contrast ### 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. Technical notesBlock mechanics, responsive behaviour and constraints ### What a buyer changes first - The lead quote. Replace with your strongest executive or customer soundbite (30–50 words). - The two rail quotes. Replace with shorter, punchier secondary quotes (15–25 words each). - The names and titles. Edit the three attribution blocks. - 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. - The section eyebrow. "Voices from the field" can be renamed or deleted. ### 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. 10KB of core-block markup, 5 blocks (column, columns, group, image, paragraph), and nothing else: paste it into the block editor and it becomes editable blocks wearing your theme. Start free trial to copy (https://patternpaste.com/account/#plan) What you copy is yours forever. Cancel whenever. Back to the library (https://patternpaste.com/patterns/) Catalogue access ### £70 a year Save £50 Or £10 a month All patterns, variations and theme downloads. What you copy is yours forever. Cancel whenever. Start with three days of full access on sign-up, no card. Start free trial (https://patternpaste.com/account/#plan) Sign in (https://patternpaste.com/account/) Everything you copy is yours to keep, forever, on any site; access to the rest of the library runs while you subscribe. Cancel any time; access runs to the end of the period you have paid for, and there is no pro-rata refund. Prices are in pounds and are the full price in the UK, the US and eleven other countries; elsewhere the checkout adds your local VAT or sales tax. The terms name every country. #### Pair with Hero Hero aperture An opening section on your theme's own paper: a tracked line, a display headline, one short paragraph on a reading measure, and then a picture that stops short of the edge on every side. The signature is the margin: the image is a window cut in the page rather than a band across it, and the paper around it is what you notice. A small opaque plate in the picture's bottom-right corner carries the caption, so no type ever sits on the photograph. The still-image version includes an example photograph; select your own clip for the video version. States no colour and no font of its own. (https://patternpaste.com/pattern/hero-aperture.html)Stats Stat callout A high-impact framed spotlight plaque: a central marquee figure and bold executive statement sit above a ruled three-part corroboration shelf enclosed within the same 1px currentColor architectural frame. States no colour and no font of its own. (https://patternpaste.com/pattern/stat-callout.html)Pricing Pricing cover menu A screen-height cover with three plans set on it like a restaurant menu: a heavy veil of your theme's contrast colour over the photograph, a display headline in the lower left and a narrow ruled price list in the right-hand column, each plan a name and its price on one line and a sentence beneath, hairline rules between, one button under the list. The list drops beneath the headline on a phone. Includes a replaceable example photograph and placeholder prices. States no colour and no font of its own. Ships with a short hand-off row on your theme's paper below it. (https://patternpaste.com/pattern/pricing-cover-menu.html) #### Before you paste 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. How we test patterns (https://patternpaste.com/how-we-test/) Sample images stay in the copied blocks. Replace them in WordPress; pasting does not upload them to your Media Library. Video variations need your own clip. Image credits (https://patternpaste.com/image-credits/). #### What's inside Blocks column, columns, group, image, paragraph Core only yes Chains 12, deepest 3 rungs currentColor yes color base, black, contrast, role-label, white spacing 50, 60, 80 font-size large, medium Continue exploring ## Next in Testimonials Explore all 11 Testimonials patterns (https://patternpaste.com/patterns/testimonials/) Shot in Twenty Twenty-Five Testimonials Testimonials Cover Standard ### Testimonial cover quote A full-bleed cover where one client quotation is set at display size across the whole photograph, under a heavy veil of your theme's contrast colour, with the name and role on a small paper plate in the lower right corner. 3 blocks · 2 variations Open preview (https://patternpaste.com/pattern/testimonial-cover-quote.html) Paper veil (https://patternpaste.com/pattern/testimonial-cover-quote.html#variant=paper-veil)Plate left (https://patternpaste.com/pattern/testimonial-cover-quote.html#variant=plate-left) Shot in Twenty Twenty-Five Testimonials Testimonials Standard ### Testimonial ledger Four client testimonials structured as horizontal ledger rows, each bounded by a 1px currentColor hairline with a portrait and the client identity on the left and the direct quote on the right. 5 blocks · 1 variation Open preview (https://patternpaste.com/pattern/testimonial-ledger.html) Night ledger (https://patternpaste.com/pattern/testimonial-ledger.html#variant=night-ledger) Shot in Twenty Twenty-Five Testimonials Testimonials Standard ### 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. 5 blocks · 1 variation Open preview (https://patternpaste.com/pattern/testimonial-metric.html) Inverted plate (https://patternpaste.com/pattern/testimonial-metric.html#variant=inverted-plate)