Testimonial portrait

One client quote against one upright portrait, two up. It is the testimonial for the page that needs a face on it: the person is shown, small, and the words are still the largest thing in the section. The picture is an example portrait, generated and nobody real. Replace it and the sample quotation with a consenting customer's photograph and words.

The picture is the small half and it is aligned to the foot of the row, so it starts a long way below the first line of the quote and the words hang over it. The two columns are 62 and 38, the portrait is held to a 240px measure inside its column rather than filling it, and the whole row is bottom aligned. So the top edge of the section is the quote alone, the bottom edge is the quote and the picture together, and the step between them is the composition. Nothing is centred, nothing is stretched to match, and the empty space above the portrait is the point rather than a gap.

That is what keeps it away from the rest of the section. testimonial-band is a full-bleed inverted band with a hanging quotation mark and a display-size quote; testimonial-trio is three bordered cards with ragged tops and level feet; quote-wall is eight short voices at reading size. This one is the only pattern in the section with a picture in it, and the only one whose composition is a step rather than a row.

• Espresso and peach (variations/espresso-and-peach.html) states an espresso ground, an Iowan Old Style quote in cream, and peach labels and rule. The low portrait and copy remain the base composition.
• Ruled foot (variations/ruled-foot.html) is the structural axis. The attribution leaves the quote column and becomes a hairline running the full 1240 under both halves, so the picture and the last line of the quote stand on the same rule and the quote is the only thing above it. The copy, the picture, the ground and the type are the base's.

• The typeface. No font family is stated anywhere, so the quote is set in your theme's face and the tracked attribution in the same one.
• Your colours. The ground asks for base and the type for contrast, the two slugs every stock block theme defines, each behind a fallback chain that ends on a colour WordPress itself guarantees. Nothing here can resolve to nothing.
• The hairline. It is currentColor, so it is exactly the colour of the type above it in every theme, including one that defines no presets at all.
• Your spacing scale. The section's padding and the gaps inside it are spacing presets, so a theme with a generous scale gets a taller section.

• The quote is at reading size, not display size. clamp(1.25rem, 1.9vw, 1.625rem) at a 1.42 line-height. A display quote beside a photograph turns into a poster, and the section already has a second object in it. This is the deliberate opposite of pull-quote's ramp, and it lets the quote run to sixty words without shouting.
• The portrait's size and its crop. 240px wide at 4:5, aspectRatio: 4/5 with scale: cover, so whatever the buyer uploads is cropped to the same upright rather than changing the layout. An upright rather than a square because this frame is large enough to be a photograph of somebody: a square at this size centres on the chest, and 4:5 keeps the head where a portrait puts it.
• The bottom alignment and the 62/38 split. Both are the signature. Set the columns back to top alignment, or give the picture the wide half, and there is no reason to buy this over any other two-up.
• The attribution as a ruled block under the words. In the base the rule belongs to the quote column, so the portrait stands free of it.
• Its own ground and padding. The section states both, so it can drop between any two neighbours without borrowing air from either. It is a section on your page ground rather than a coloured band: the bands in this section are testimonial-band's job.

1. The picture. Select the example portrait and choose Replace to use a photograph from your media library. The included portrait is generated and nobody real; replace it with the person who supplied your real quotation.
2. The quote. Fifty to seventy words is what the ramp is drawn for. Much shorter and the quote column stops being taller than the portrait, which is the whole composition; much longer and it becomes a case study.
3. The name and the role. Two lines, tracked caps then plain. Delete the second and the first stays on its rule.
4. The eyebrow. "From the client" is a paragraph rather than a heading, so it stays out of your page outline. Change the words or delete the block.
5. How small the picture is. It is held by a 240px content size on the group around it, and that number is a WIDTH: at 4:5 the frame is 300px tall. Raise it towards 320px to close the step, lower it to open it. Do not let it pass the height of the quote block: at that point the picture is overhanging the words and the section is a different one.

• Core blocks only: group, columns, column, paragraph, image. No plugin, no script, no stylesheet, nothing to keep updated.
• The example portrait is included by public URL in both the preview and copied markup. It is a generated picture of nobody real, so it illustrates the layout and does not represent a customer endorsement.
• Nothing is set on the photograph. Type over an image is a colour pair nobody can measure, because the buyer chooses the image, so the quote and the attribution sit on the section's own ground.
• The quote crosses 24px at wide viewports, so its pair is judged at the large-text floor of 3:1 there and at 4.5:1 below; the eyebrow and the attribution are small and are judged at 4.5:1. Every pair is base against contrast.
• At 390 the columns stack, which is the right answer: the quote, then its rule and name, then the portrait beneath, still small and still left.

The copied markup includes example portraits, generated and nobody real. The public image URLs keep the examples visible after pasting. Select an image or cover and choose Replace to use photographs of your own people. See image credits for the sources. Pasting an image URL does not import a Media Library attachment.