# 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. States no colour and no font of its own. Canonical: https://patternpaste.com/pattern/testimonial-band.html Section: Testimonials Access: Free, and free to keep. Needs: 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. Blocks: column, columns, group, image, paragraph Keywords: testimonial, quote, review, band, inverted, client ## Variations (2) ### Night band (the default) Identical markup in every theme. The band inverts to your contrast colour with your base type on it, so the quote reads as a hard stop between two lighter sections. The hanging mark and the attribution rule follow the type. ### Paper band Identical markup in every theme. The same composition on your page ground: your base behind, your contrast type on it. Use this one when the sections either side of it are already dark, or when you want the quote to sit inside the page rather than cut across it. --- ## 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. ## 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. ## What a buyer changes first 1. **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. 2. **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. 3. **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. 4. **The band's height.** Padding is spacing preset 80 top and bottom. Step it to 70 if your theme's scale is already generous. 5. **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. 6. **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. ## 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. ## 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. ## 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)