Quote wall: WordPress Block Pattern, Pattern Paste Canonical: https://patternpaste.com/pattern/quote-wall.html Core Patterns (https://patternpaste.com/patterns/) Testimonials (https://patternpaste.com/patterns/testimonials/) Catalogue access Standard # 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. The rules line up once across the top of the wall and never again, so the section reads as a mass of voices rather than as a row of cards. ## All patterns Search patterns Loading patterns… The signature moment ## Density, and rules that agree only once Eight voices in the space the rest of the section gives to one, and the hairlines line up across the wall exactly once. Every quote hangs under its own currentColor rule. The three columns start level, so the top of the section is one broken line running the full 1240. After that the columns hold three, two and three quotes of deliberately different lengths, so no rule below the first ever meets another, and the wall reads as a mass rather than as a grid of cards. Theme handoff ## What comes from where ### From your theme - The typeface. - Your colours. - Every rule. - The vertical rhythm inside a column. ### Set by this pattern - Reading size, and a floor. - The three widths and the three counts. - The quote lengths. - A face for every voice. - Full bleed with its own measure. 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 Eight short testimonials at once, in three columns of unequal width. It is the section for the page that has more proof than room: not one voice given a whole band, but a wall of them, read the way a page of blurbs on the back of a book is read. ### The signature moment: density, and rules that agree only once Eight voices in the space the rest of the section gives to one, and the hairlines line up across the wall exactly once. Every quote hangs under its own currentColor rule. The three columns start level, so the top of the section is one broken line running the full 1240. After that the columns hold three, two and three quotes of deliberately different lengths, so no rule below the first ever meets another, and the wall reads as a mass rather than as a grid of cards. The unevenness is structural, not decorative. The widest column, 38, carries the two longest quotes; the narrowest, 28, carries the three shortest; the middle count is the odd one. That is what stops the section resolving into a tidy three-up, which the catalogue already has in testimonial-trio. Against the rest of the section: testimonial-band gives one quote a full-bleed inverted band, testimonial-trio gives three quotes three bordered cards, and testimonial-portrait builds half its composition out of one large frame. All three are low-density by design. This is the only one that is a crowd, and the quotes are short at reading size for that reason: eight display quotes would be a poster and eight cards would be a directory. Every section here carries the faces of the people quoted; only this one carries enough of them to read as a room. Make it yoursVariations and the edits to make first ### The variation - Offset wall (variations/offset-wall.html) is the structural axis. The same eight voices are laid in two columns of four, 46 and 54, and the second column is dropped by clamp(2.5rem, 5vw, 5.5rem), most of an entry. So the one line the base's rules agree on is broken as well, and the wall is laid like brickwork. The copy, the ground, the type and the sizes are the base's. 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 names take the same one, which is why the caps lines read as small caps in a serif theme and as spec labels in a sans 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 ending on a colour WordPress itself guarantees. - Every rule. The hairlines are currentColor, so they are the type colour by definition. They cannot blank, they cannot clash, and they invert with the section if you invert it. - The vertical rhythm inside a column. The gap between one entry and the next is your theme's block gap, so a theme with a generous scale gets a looser wall and a tight one gets a denser one. Only the section's outer padding and the gap under each rule are stated here. ### What it decides for itself - Reading size, and a floor. Quotes are clamp(1rem, 1.15vw, 1.125rem) and names clamp(0.9375rem, 1vw, 1rem), so nothing a visitor actually reads falls below 15px. Core's small preset is 13px in a theme with no size scale, which is why this pattern states its own sizes instead. - The three widths and the three counts. 34 with three quotes, 38 with two, 28 with three. Change them and the wall becomes a grid. - The quote lengths. Between six and twenty-six words, assigned to columns by length. This is copy doing structural work: the ragged column feet are the quote lengths, not a setting. - A face for every voice. Each name sits under a 4.5rem square portrait, eight distinct people across the wall and the same eight in the same pairings in the variation. The face is above the name rather than beside it because the narrowest column is 28% of the band, and a chip in the same row laddered the names into a ribbon at 820px. At this size the faces read as a crowd rather than as eight photographs, which is what a wall of voices is for. None of them states a colour. - Full bleed with its own measure. The section spans the viewport and holds its content to 1240px, and it states its own ground and padding so it can sit between any two neighbours. Technical notesBlock mechanics, responsive behaviour and constraints ### What a buyer changes first - The eight quotes. Keep them short and keep them unequal. One long testimonial in the narrow column will pull that column past the others and the wall will start to look like a mistake rather than a mass. - The names and the faces. One line each, "Name, Company", tracked and set in caps, with a portrait beside it. A name that wraps is not a defect here, unlike in testimonial-trio, because nothing in this section is level below the first rule. Every frame is a square head-and-shoulders chip, so a waist-up photograph squared from the middle loses the crown of the head; keep the eight faces distinct or the wall reads as one person repeated. - The count. Delete a quote or duplicate one, and take its face with it. Six is the fewest that still reads as a wall; ten is comfortable at 1240 if you shorten the copy. - The eyebrow. "Eight of them, unedited" is a paragraph rather than a heading, so it stays out of your page outline. If you change the number of quotes, change this line with it, because it is the one place in the section that states a count. - The rules. They are a 1px currentColor top border on each entry, stated as a literal length because there are no border presets at this catalogue's WordPress floor. Remove them and the section is a wall of text; that is a legitimate design and it is not this one. ### Notes - Core blocks only: group, columns, column, paragraph, image. No plugin, no script, no stylesheet, nothing to keep updated. - The quotes are paragraphs rather than core/quote blocks, for the reason testimonial-trio gives: a blockquote arrives with the theme's own decoration, usually a rule or an indent, and a second rule under a hairline fights it. - Every pair in the section is base against contrast. Nothing is display size, so every pair is judged at the full 4.5:1 rather than the large-text floor. - At 390 the columns stack and the wall becomes eight ruled entries down the page. It stays dense, which is the point; the offset in the variation collapses to a single extra gap at the seam. Questions ## Quote wall: common questions Does Quote wall 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 Quote wall match my theme? Yes. It names no colour or font of its own: every colour, size and space is a preset from your theme, so it takes your theme’s palette and type when pasted. How many variations does Quote wall have? 2: Uneven columns and Offset wall. 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 Quote wall free? It is included with a subscription, with every Core Pattern and variation. 62 Core Patterns are free to copy without one. 19KB 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 2 Colour From your theme Type From your theme Motion None Blocks column, columns, group, image, paragraph Presets color 5, spacing 3, 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 ### 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. Testimonials Preview pattern (https://patternpaste.com/pattern/testimonial-trio.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) Shot in Twenty Twenty-Five Testimonials No plugin needed ### Reviews score cutout Four short reviews wrap around a large central score within one ruled composition. Testimonials Preview pattern (https://patternpaste.com/pattern/reviews-score-cutout.html)