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.
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
baseundercontrast, 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-quoteis 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.
- 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
- 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 and roles. 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.
- 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.
Variation64 words
- Ruled spines. The same three quotes with the boxes removed: each card keeps only a vertical
currentColorhairline 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.
Notes115 words
- Core blocks only: group, heading, columns, column, paragraph. No plugin, nothing to keep updated, and nothing that stops working if a script does.
- The quotes are paragraphs rather than
core/quoteblocks 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 inpull-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.
The markup
Core block markup and nothing else. Copy it, then paste it straight into the block editor: WordPress reads the delimiters and rebuilds the blocks.
Fetching the markup…
Variation: Ruled spines
Fetching the markup…