# 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. States no colour and no font of its own. Canonical: https://patternpaste.com/pattern/testimonial-trio.html Section: Testimonials Access: Free, and free to keep. Needs: 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. Blocks: column, columns, group, heading, image, paragraph Keywords: testimonial, quotes, reviews, social proof, cards, three ## Variations (3) ### Bordered cards (the default) Identical markup in every theme. Three bordered cards on your base, bottom-aligned: ragged tops, level feet. The boxes and the attribution rules are currentColor, so they follow your text wherever your theme puts it. ### Folio This variation states its own colours and states its own type: identical in every theme. The Folio photographer set: three bone cards on a paper band, each a safelight quotation mark, one client line in Helvetica and a monospace frame number, place and year over the name at a graphite hairline; no portraits. ### Ruled spines Identical markup in every theme. The boxes come off and each quote hangs from a vertical hairline of its own. The rules are unequal lengths because the quotes are, and they all stop on the same line, so the stepping the cards imply is drawn instead. --- ## 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. ## 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. ## What to change first 1. **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. 2. **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. 3. **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. 4. **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. 5. **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. ## 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.