Testimonial portrait: WordPress Block Pattern, Pattern Paste Canonical: https://patternpaste.com/pattern/testimonial-portrait.html Core Patterns (https://patternpaste.com/patterns/) Testimonials (https://patternpaste.com/patterns/testimonials/) Catalogue access Standard # Testimonial portrait One client quote against one example upright portrait, two up on your page ground. The picture is the small half and is aligned to the foot of the row, so it starts well below the first line of the quote and the words overhang it; the quote is set at reading size rather than display size, and the name and role sit on a currentColor hairline beneath it. Example images are included and can be replaced in the editor. ## All patterns Search patterns Loading patterns… The signature moment ## The quote overhangs a low portrait 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. Theme handoff ## What comes from where ### From your theme - The typeface. - Your colours. - The hairline. - Your spacing scale. ### Set by this pattern - The quote is at reading size, not display size. - The portrait's size and its crop. - The bottom alignment and the 62/38 split. - The attribution as a ruled block under the words. - Its own ground and padding. 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 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 signature moment: the quote overhangs a low portrait 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. Make it yoursVariations and the edits to make first ### The variation - 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. Theme behaviourInheritance, fixed decisions and contrast ### What it inherits from your theme - 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. ### What it decides for itself - 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. Technical notesBlock mechanics, responsive behaviour and constraints ### What a buyer changes first - 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. - 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. - The name and the role. Two lines, tracked caps then plain. Delete the second and the first stays on its rule. - 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. - 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. ### Notes - 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. ### Included images 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 (https://patternpaste.com/image-credits/) for the sources. Pasting an image URL does not import a Media Library attachment. Questions ## Testimonial portrait: common questions Does Testimonial portrait need a plugin? No. It is built only from core WordPress blocks (column, columns, group, image and paragraph), so it pastes into the block editor with nothing to install. Will Testimonial portrait match my theme? Choose by variation. Low portrait and Ruled foot take your theme’s palette; Espresso and peach brings its own colours. How many variations does Testimonial portrait have? 3: Low portrait, Espresso and peach and Ruled foot. 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 portrait free? It is included with a subscription, with every Core Pattern and variation. 62 Core Patterns are free to copy without one. 5.0KB 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. Subscribe to copy it, £49 a year (https://patternpaste.com/account/#plan) What you copy is yours forever. Not for you? We refund within 14 days. Back to Core Patterns (https://patternpaste.com/patterns/) Catalogue access ### £49 a year All patterns, variations and theme downloads. What you copy is yours forever. Not for you? We refund within 14 days. Subscribe, £49 a year (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. Not for you? Tell us within 14 days of a payment and we refund you. After that, cancelling stops the next renewal and access runs to the end of the year you have paid for. 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 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 Subscription 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, image, paragraph Presets color 5, spacing 3, font-size 2 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 ### Testimonial overlap cards Three review cards lapped up over the foot of a wide photograph at three different heights, each card a plate with one rounded corner, a large opening quotation mark, the review and a round portrait with the reviewer's name at its foot. Testimonials Preview pattern (https://patternpaste.com/pattern/testimonial-overlap-cards.html) Shot in Twenty Twenty-Five Testimonials No plugin needed ### Testimonial ratings A 6-item reflowing grid of customer reviews, each in a 1px currentColor card topped with a tracked star-rating badge on its own hairline, followed by a punchy review quote and the reviewer's portrait beside their credentials. Testimonials Preview pattern (https://patternpaste.com/pattern/testimonial-ratings.html) Shot in Twenty Twenty-Five Testimonials No plugin needed ### Testimonial stagger Two large-format client testimonials in equal 50/50 columns with an intentional vertical offset: the second column steps down significantly, creating a rhythmic descending cadence between two equally weighted voices, each with a portrait on its attribution hairline. Testimonials Preview pattern (https://patternpaste.com/pattern/testimonial-stagger.html)