Testimonial trio: WordPress Block Pattern, Pattern Paste Canonical: https://patternpaste.com/pattern/testimonial-trio.html Core Patterns (https://patternpaste.com/patterns/) Testimonials (https://patternpaste.com/patterns/testimonials/) Free Standard # Testimonial trio Three testimonials across, each a 1px currentColor card holding one quote and an attribution locked to a hairline at its foot, the speaker's portrait beside the name. The quotes are deliberately unequal lengths and the cards are bottom-aligned, so the tops of the boxes step and the feet and their rules run level. ## All patterns Search patterns Loading patterns… Start here ## What to change first - The three quotes. Replace them, and keep them unequal: one short, one long, one in between is what the composition is drawn around. - The names, roles and faces. Keep each role line to one line at your widest layout. - The label. "In their words" is a heading, so it is in your outline. - The number of cards. Delete a column for two, duplicate one for four. - The section's height. Padding is spacing preset 80 top and bottom. The signature moment ## Ragged tops, level feet The quotes are deliberately unequal lengths and the cards are bottom-aligned, so the boxes step down across the row while their feet and their attribution rules run dead level. Every three-up testimonial section in the wild does the opposite: it either stretches the boxes to equal height, which leaves a pool of dead space under the short quote, or it trims the copy until all three are the same length, which is how testimonials come to sound written by one person. Theme handoff ## What comes from where ### From your theme - The typeface. - Your colours. - Every rule and every border. - Your spacing scale. ### Set by this pattern - Full bleed with its own measure. - The bottom alignment. - The card's internal ramp. - The attribution block is two lines in every card. - A portrait under each foot rule. - The border weight. 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 Three testimonials across, each in a bordered card, each carrying one quote and one attribution. It is the section that goes in the middle of a page, between the thing you offer and the thing you ask for, and it is built to sit between two neighbours it knows nothing about: it states its own ground and its own vertical padding and borrows air from neither side. ### The signature moment: ragged tops, level feet The quotes are deliberately unequal lengths and the cards are bottom-aligned, so the boxes step down across the row while their feet and their attribution rules run dead level. Every three-up testimonial section in the wild does the opposite: it either stretches the boxes to equal height, which leaves a pool of dead space under the short quote, or it trims the copy until all three are the same length, which is how testimonials come to sound written by one person. This one keeps the real lengths. What holds the row together is the bottom edge: three feet on one line, three hairlines above three names on the same line, and above that a stepped top edge that tells you at a glance the three people said different amounts. Density contrast across one row, drawn with a single alignment decision and no colour at all. The mechanism is core's own: the columns are vertically aligned to the bottom, so each column is as tall as its card and the row's baseline is its floor. It costs nothing, and below 782px, where core stacks the columns, the row becomes three cards down the page and the alignment quietly stops mattering. Make it yoursVariations and the edits to make first ### What to change first - The three quotes. Replace them, and keep them unequal: one short, one long, one in between is what the composition is drawn around. If all three come back the same length the section still works and the signature is gone. - The names, roles and faces. Keep each role line to one line at your widest layout. A role that wraps in one card and not the others pushes that card's hairline off the level, which is the one thing this section notices. Swap the three portraits for your own; each is a square head-and-shoulders chip, and a waist-up photograph squared from the middle loses the crown of the head. - The label. "In their words" is a heading, so it is in your outline. Change the words or delete the block; the row below stands on its own. - The number of cards. Delete a column for two, duplicate one for four. Four columns at 1240px puts the quotes on a narrow measure, so shorten them if you go that way. - The section's height. Padding is spacing preset 80 top and bottom. Step it to 70 if it feels heavy against the sections above and below. ### Variation - Ruled spines. The same three quotes with the boxes removed: each card keeps only a vertical currentColor hairline down its left edge, so the unequal quote lengths are drawn as three rules of three different lengths, all stopping on the same line. It is the structural axis, not the colour one: the ground, the type and the copy are identical to the base. Theme behaviourInheritance, fixed decisions and contrast ### What it inherits from your theme - The typeface. No font family is stated anywhere. The quotes take your body face and the tracked attribution takes it too, which is why the caps line reads as a small-caps label in a serif theme and as a spec label in a sans one. - Your colours. The section asks for base under contrast, the two slugs every stock block theme defines, each behind a fallback chain ending on a colour WordPress itself guarantees. Nothing here can resolve to nothing. - Every rule and every border. The card boxes and the attribution hairlines are currentColor. They are the text colour by definition, so they cannot blank, they cannot clash, and they invert with the section if you invert it. - Your spacing scale. The section's top and bottom padding and the gap above the row are spacing presets, so a theme with a generous scale gets a taller section without you touching it. ### What it decides for itself - Full bleed with its own measure. The section spans the viewport and holds its content to 1240px, so it is a band on a page rather than another column inside the theme's. - The bottom alignment. This is the pattern. If you set the columns back to top or stretch, you have a competent three-up card row and no reason to buy it. - The card's internal ramp. The quote is set just above body size at a 1.6 line-height; the attribution is a size below it, tracked and set in caps, on its own rule. Nothing in the card is display size: three display quotes in one row shout over each other, which is what pull-quote is for, one at a time. - The attribution block is two lines in every card. Name, then role and company. Keeping the line count equal is what keeps the hairlines level, so the rules and the feet agree. - A portrait under each foot rule. A 5rem square frame hangs from the attribution hairline with the name and role beneath it. It sits ABOVE the name rather than beside it because the card is narrow: measured at 820px, a chip in the same row left the attribution about fourteen characters a line and the copy laddered into a ribbon. Stacked, the name keeps the card's full measure at every width, all three frames are the same size, and the feet stay level. An image states no colour, so the section still promises none. - The border weight. 1px, stated as a literal length, because there are no border presets at this catalogue's WordPress floor. Technical notesBlock mechanics, responsive behaviour and constraints ### Notes - Core blocks only: group, heading, columns, column, paragraph, image. No plugin, nothing to keep updated, and nothing that stops working if a script does. - The quotes are paragraphs rather than core/quote blocks on purpose. A blockquote arrives carrying its own theme decoration, usually a rule or an indent, and a second rule inside a bordered card fights the card. The section is a quote row; the block that says so lives in pull-quote. - The section paints its own ground rather than letting the page show through, so it reads as a band whichever pattern is above it. If you invert the ground, invert the text with it; the borders follow on their own. Questions ## Testimonial trio: common questions Does Testimonial trio need a plugin? No. It is built only from core WordPress blocks (column, columns, group, heading, image and paragraph), so it pastes into the block editor with nothing to install. Will Testimonial trio match my theme? Choose by variation. Bordered cards and Ruled spines take your theme’s palette; Folio brings its own colours. How many variations does Testimonial trio have? 3: Bordered cards, Folio and Ruled spines. Each is its own markup; choose one in the toolbar above the preview before you copy. Can I use my own images? Yes. Sample images stay in the copied blocks. Replace them in WordPress; pasting does not upload them to your Media Library. Is Testimonial trio free? Yes. It is one of 62 free Core Patterns: copy it and it is yours to keep and edit. Back to Core Patterns (https://patternpaste.com/patterns/) ### Free pattern Copy it and paste it straight into the block editor. It is yours to keep and edit. Read the markup #### 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 Arisings recycled figures A figures section on an inverted slab where one number carries it: a percentage set at display size over a heading that finishes the sentence and a short note, beside a tall photograph. Under it three ruled tiles break the figure down, each a large percentage, a heading and a line, with a second photograph as the fourth tile. Four across on a wide screen, two on a tablet, one on a phone. States no colour and no font of its own. (https://patternpaste.com/pattern/arisings-recycled-figures.html)Pricing Donate impact tiers Four donation cards for a charity, each amount set at display size over what it pays for, one plain line of how, and a Donate button on the foot. The third card is inverted as the most given gift, and a note under the cards carries the charity number, Gift Aid and a link to give another amount. States no colour and no font of its own. (https://patternpaste.com/pattern/donate-impact-tiers.html) #### Before you paste Requires a block theme on WordPress 7.0 to 7.1. 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/). ## Specifications Section Testimonials Access Free Plugin None, core blocks only Variations 3 Colour From your theme or its own palette Type From your theme or its own type Motion None Blocks column, columns, group, heading, image, paragraph Presets color 5, spacing 4, font-size 1 WordPress 7.0+ Continue exploring ## Next in Testimonials Explore all 17 Testimonials patterns (https://patternpaste.com/patterns/testimonials/) Shot in Twenty Twenty-Five Testimonials No plugin needed ### Notes from the Table Four warm guest quotations sit in offset framed cards beneath a conversational introduction. Testimonials Preview pattern (https://patternpaste.com/pattern/testimonial-table-notes.html) Shot in Twenty Twenty-Five Testimonials No plugin needed ### Quote wall Eight short testimonials at reading size in three columns of unequal width, three, two and three, each quote hanging under a currentColor hairline with a small portrait and its name tracked beneath it, eight distinct faces. Testimonials Preview pattern (https://patternpaste.com/pattern/quote-wall.html) Shot in Twenty Twenty-Five Testimonials No plugin needed ### Review job dockets Reviews for a trade, each filed against the job it was for: a header with the average score beside the heading, then three docket cards whose inverted head strip names the job, the postcode, the price and the time on site above a dashed perforation, the customer's words and their name and street. Testimonials Preview pattern (https://patternpaste.com/pattern/review-job-dockets.html)