Testimonial band: WordPress Block Pattern, Pattern Paste Canonical: https://patternpaste.com/pattern/testimonial-band.html Core Patterns (https://patternpaste.com/patterns/) Testimonials (https://patternpaste.com/patterns/testimonials/) Free Standard # Testimonial band One client quote on a full-bleed inverted band: an oversized opening quotation mark hangs in its own margin column while the quote itself runs the full width of the band, and the attribution sits on a currentColor hairline beneath it, the speaker's portrait beside the name tracked wide at one end and the role at the other. ## All patterns Search patterns Loading patterns… The signature moment ## The hanging mark breaking the measure The signature is the oversized opening quotation mark, set outside the text. It lives in its own narrow column at the left of the band, at display size, with a line-height under one so it sits high against the first line of the quote. The quote never wraps around it and never indents for it: the mark is a structural mark on the band's left edge, the way a printed pull quote hangs its punctuation into the margin, not punctuation attached to a sentence. Theme handoff ## What comes from where ### From your theme - The typeface. - Your colours. - Your spacing scale. - The attribution rule. ### Set by this pattern - Full bleed with its own measure. - The quote runs wide. - The mark's proportion. - The attribution as a ruled row. - The speaker's portrait on that rule. - Its own ground and its own 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, edge to edge, on an inverted band. It is built for the middle of a page rather than the end of it: no action, no eyebrow, nothing to click. The section says one thing, in somebody else's voice, and hands the page on. ### The signature moment: the hanging mark breaking the measure The signature is the oversized opening quotation mark, set outside the text. It lives in its own narrow column at the left of the band, at display size, with a line-height under one so it sits high against the first line of the quote. The quote never wraps around it and never indents for it: the mark is a structural mark on the band's left edge, the way a printed pull quote hangs its punctuation into the margin, not punctuation attached to a sentence. That is what keeps the band away from the catalogue's other testimonial. The pull-quote pattern is a narrow column of display type with enormous air on a soft ground, pushed off the optical centre. This one is inverted, the quote runs the full width of the band rather than a 760px measure, and the composition is built on the seam between a 13% margin column and an 87% one. It is also not a CTA: cta-band inverts too, but everything in it is centred and it exists to be clicked. Nothing here is centred and nothing here is a link. Make it yoursVariations and the edits to make first ### The variation - Paper band (variations/paper-band.html) moves the colour axis and nothing else: the ground becomes your base and the type your contrast. The composition, the ramp and the hanging mark are the base's, unchanged. Theme behaviourInheritance, fixed decisions and contrast ### What it inherits from your theme - The typeface. No font family is stated anywhere, including on the mark. It is set in whatever face your theme sets, so the quotation mark is your theme's quotation mark and it looks like the rest of your site. - Your colours. The ground asks for contrast and everything on it asks for base; both are defined by every stock block theme, and both fall back to black and white, so the band cannot fail to invert. - Your spacing scale. The band's height and the gaps inside it are spacing presets, so a theme with a generous scale gets a taller band. - The attribution rule. 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. ### What it decides for itself - Full bleed with its own measure. The band spans the viewport and holds its content to 1240px, so it is a band rather than another column of text. - The quote runs wide. At the top of the ramp the quote is set near 46px across roughly 1000px, which breaks it into three or four long lines. This is the deliberate opposite of a narrow display quote, and it is why the section reads as a statement rather than as a card. - The mark's proportion. clamp(5.5rem, 11vw, 10rem) with line-height: 0.62. The line-height is the design: it pulls the glyph up so its top aligns near the top of the first line of the quote instead of floating below it. - The attribution as a ruled row. Name and role sit at opposite ends of one hairline row rather than stacking under the quote, which keeps the section three elements tall and lets the rule finish the composition. - The speaker's portrait on that rule. A 6.5rem square frame hangs from the hairline beside the tracked name, the two locked into one no-wrap cluster so the face never separates from the person it belongs to when the row wraps. It is the only photograph in the section and it carries no colour of its own, so the band's colour promise is unchanged. - Its own ground and its own padding. The section states both, so it can be dropped between any two other sections without borrowing air from either. ### Display type Off the theme's ladder on purpose, because the size is the composition: - paragraph at clamp(5.5rem, 11vw, 10rem) - paragraph at clamp(1.625rem, 3.4vw, 2.875rem) Technical notesBlock mechanics, responsive behaviour and constraints ### What a buyer changes first - The quote. Replace it with a real one. The ramp is built for roughly 25 to 45 words; much shorter and the wide measure has nothing to do, much longer and it stops being a quote and becomes a case study. - The portrait. Swap the image for the person who actually said it. Use a head-and-shoulders photograph: the frame is square and covered, so a full-length shot squared from the middle loses the crown of the head. - The two attribution lines. The first is the person, tracked wide in caps; the second is the role and the company. Delete the second and the first stays on its rule. - The band's height. Padding is spacing preset 80 top and bottom. Step it to 70 if your theme's scale is already generous. - The mark. If you want it quieter, drop the font-weight on it to 400, or reduce the top of its clamp(). Do not give it a colour of its own: it is the same colour as the type on purpose, which is what makes it read as structure. - The ground. If the sections either side of this one are already dark, switch to the Paper band variation rather than editing colours by hand. ### Notes - Core blocks only: group, columns, column, paragraph, image. No plugin, no script, no stylesheet, nothing to keep updated. - Every colour is a fallback chain ending on a colour WordPress itself guarantees, so nothing in the band can resolve to nothing. - The quote is set well above 24px at every viewport, so its pair is judged at the large-text floor of 3:1; the attribution lines are small and are judged at 4.5:1. Both are the base/contrast pair, which every stock theme defines. - At 390 the two columns stack, which is the right answer here: the mark becomes a large opening flourish above the quote and the attribution row wraps to two lines. Questions ## Testimonial band: common questions Does Testimonial band 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 band 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 Testimonial band have? 2: Night band and Paper band. 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 band free? Yes. It is one of 62 free Core Patterns: copy it and it is yours to keep and edit. Back to Core Patterns (https://patternpaste.com/patterns/) ### Free pattern Copy it and paste it straight into the block editor. It is yours to keep and edit. Read the markup #### 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 Free 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 4, spacing 4, 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 ### Reviews score summary A review summary for a local business. Testimonials Preview pattern (https://patternpaste.com/pattern/reviews-score-summary.html) Shot in Twenty Twenty-Five Testimonials No plugin needed ### Testimonial cover quote A full-bleed cover where one client quotation is set at display size across the whole photograph, under a heavy veil of your theme's contrast colour, with the name and role on a small paper plate in the lower right corner. Testimonials Preview pattern (https://patternpaste.com/pattern/testimonial-cover-quote.html) Shot in Twenty Twenty-Five Testimonials No plugin needed ### Testimonial lead and rail An asymmetric two-column section with a 58/42 split: an expansive featured client quote on the left under a large portrait on its attribution rule, counterweighted by a vertical stack of two compact peer testimonials on the right, each with a small portrait, separated by a currentColor hairline. Testimonials Preview pattern (https://patternpaste.com/pattern/testimonial-lead-and-rail.html)