Pattern Paste
Subscribe

Core Patterns Testimonials

FreeStandard

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

Loading patterns…

Theme
Preview size
Look
Twenty Twenty-Five·1280px

Manrope typefacergb(255, 255, 255) ground1280px viewport

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

  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.

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.

The markup

Core block markup and nothing else. Copy it, then paste it straight into the block editor: WordPress reads the delimiters and rebuilds the blocks. This is the file as authored; the copy button on the stage applies the finish you chose there.

5,241 bytes 
<!-- wp:group {"align":"full","style":{"color":{"background":"var(--wp--preset--color--contrast, var(--wp--preset--color--black))","text":"var(--wp--preset--color--base, var(--wp--preset--color--white))"},"spacing":{"padding":{"top":"var:preset|spacing|80","bottom":"var:preset|spacing|80","left":"clamp(1.25rem, 4vw, 4rem)","right":"clamp(1.25rem, 4vw, 4rem)"}},"elements":{"heading":{"color":{"text":"currentColor"}},"link":{"color":{"text":"currentColor"}}}},"layout":{"type":"constrained","contentSize":"1240px"}} -->
<div class="wp-block-group alignfull has-text-color has-background has-link-color" style="color:var(--wp--preset--color--base, var(--wp--preset--color--white));background-color:var(--wp--preset--color--contrast, var(--wp--preset--color--black));padding-top:var(--wp--preset--spacing--80);padding-right:clamp(1.25rem, 4vw, 4rem);padding-bottom:var(--wp--preset--spacing--80);padding-left:clamp(1.25rem, 4vw, 4rem)"><!-- wp:columns {"verticalAlignment":"top","style":{"spacing":{"blockGap":{"top":"var:preset|spacing|20","left":"1.25rem"}}}} -->
<div class="wp-block-columns are-vertically-aligned-top"><!-- wp:column {"verticalAlignment":"top","width":"13%"} -->
<div class="wp-block-column is-vertically-aligned-top" style="flex-basis:13%"><!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--base, var(--wp--preset--color--white))"},"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"clamp(5.5rem, 11vw, 10rem)","fontWeight":"700","letterSpacing":"-0.06em","lineHeight":"0.62"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--base, var(--wp--preset--color--white));margin-top:0;margin-bottom:0;font-size:clamp(5.5rem, 11vw, 10rem);font-weight:700;letter-spacing:-0.06em;line-height:0.62">“</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"top","width":"87%"} -->
<div class="wp-block-column is-vertically-aligned-top" style="flex-basis:87%"><!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--base, var(--wp--preset--color--white))"},"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"clamp(1.625rem, 3.4vw, 2.875rem)","fontStyle":"normal","fontWeight":"400","letterSpacing":"-0.02em","lineHeight":"1.14"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--base, var(--wp--preset--color--white));margin-top:0;margin-bottom:0;font-size:clamp(1.625rem, 3.4vw, 2.875rem);font-style:normal;font-weight:400;letter-spacing:-0.02em;line-height:1.14">We stopped briefing a designer for every landing page in the third week. The sections were already there, already ours, and the team shipped four campaigns in the time the last one took.</p>
<!-- /wp:paragraph -->

<!-- wp:group {"style":{"border":{"top":{"color":"currentColor","style":"solid","width":"1px"}},"spacing":{"margin":{"top":"var:preset|spacing|50"},"padding":{"top":"var:preset|spacing|30"},"blockGap":"1.25rem"}},"layout":{"type":"flex","flexWrap":"wrap","justifyContent":"space-between","verticalAlignment":"top"}} -->
<div class="wp-block-group" style="border-top-color:currentColor;border-top-style:solid;border-top-width:1px;margin-top:var(--wp--preset--spacing--50);padding-top:var(--wp--preset--spacing--30)"><!-- wp:group {"style":{"spacing":{"blockGap":"0.875rem"}},"layout":{"type":"flex","flexWrap":"nowrap","verticalAlignment":"center"}} -->
<div class="wp-block-group"><!-- wp:image {"aspectRatio":"1","scale":"cover","sizeSlug":"large","linkDestination":"none","width":"6.5rem","style":{"spacing":{"margin":{"top":"0","bottom":"0"}}}} -->
<figure class="wp-block-image size-large is-resized" style="margin-top:0;margin-bottom:0"><img src="https://patternpaste.com/previews/_assets/portrait-10-head.jpg" alt="Head and shoulders of a woman in their 50s with silver-streaked dark hair loosely tied back, wearing a navy blouse, against a warm grey background." style="aspect-ratio:1;object-fit:cover;width:6.5rem"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--base, var(--wp--preset--color--white))"},"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"clamp(0.9375rem, 1.1vw, 1rem)","fontWeight":"600","letterSpacing":"0.18em","textTransform":"uppercase"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--base, var(--wp--preset--color--white));margin-top:0;margin-bottom:0;font-size:clamp(0.9375rem, 1.1vw, 1rem);font-weight:600;letter-spacing:0.18em;text-transform:uppercase">Marguerite Vaillancourt</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--base, var(--wp--preset--color--white))"},"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--medium, clamp(0.9375rem, 1.1vw, 1rem))"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--base, var(--wp--preset--color--white));margin-top:0;margin-bottom:0;font-size:var(--wp--preset--font-size--medium, clamp(0.9375rem, 1.1vw, 1rem))">Head of marketing, Halfpenny &amp; Co</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->
Variation: Paper band
4,797 bytes 
<!-- wp:group {"align":"full","style":{"color":{"background":"var(--wp--preset--color--base, var(--wp--preset--color--white))","text":"var(--wp--preset--color--contrast, var(--wp--preset--color--black))"},"spacing":{"padding":{"top":"var:preset|spacing|80","bottom":"var:preset|spacing|80","left":"clamp(1.25rem, 4vw, 4rem)","right":"clamp(1.25rem, 4vw, 4rem)"}},"elements":{"heading":{"color":{"text":"currentColor"}},"link":{"color":{"text":"currentColor"}}}},"layout":{"type":"constrained","contentSize":"1240px"}} -->
<div class="wp-block-group alignfull has-text-color has-background has-link-color" style="color:var(--wp--preset--color--contrast, var(--wp--preset--color--black));background-color:var(--wp--preset--color--base, var(--wp--preset--color--white));padding-top:var(--wp--preset--spacing--80);padding-right:clamp(1.25rem, 4vw, 4rem);padding-bottom:var(--wp--preset--spacing--80);padding-left:clamp(1.25rem, 4vw, 4rem)"><!-- wp:columns {"verticalAlignment":"top","style":{"spacing":{"blockGap":{"top":"var:preset|spacing|20","left":"1.25rem"}}}} -->
<div class="wp-block-columns are-vertically-aligned-top"><!-- wp:column {"verticalAlignment":"top","width":"13%"} -->
<div class="wp-block-column is-vertically-aligned-top" style="flex-basis:13%"><!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"clamp(5.5rem, 11vw, 10rem)","fontWeight":"700","letterSpacing":"-0.06em","lineHeight":"0.62"}}} -->
<p style="margin-top:0;margin-bottom:0;font-size:clamp(5.5rem, 11vw, 10rem);font-weight:700;letter-spacing:-0.06em;line-height:0.62">“</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"top","width":"87%"} -->
<div class="wp-block-column is-vertically-aligned-top" style="flex-basis:87%"><!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"clamp(1.625rem, 3.4vw, 2.875rem)","fontStyle":"normal","fontWeight":"400","letterSpacing":"-0.02em","lineHeight":"1.14"}}} -->
<p style="margin-top:0;margin-bottom:0;font-size:clamp(1.625rem, 3.4vw, 2.875rem);font-style:normal;font-weight:400;letter-spacing:-0.02em;line-height:1.14">We stopped briefing a designer for every landing page in the third week. The sections were already there, already ours, and the team shipped four campaigns in the time the last one took.</p>
<!-- /wp:paragraph -->

<!-- wp:group {"style":{"border":{"top":{"color":"currentColor","style":"solid","width":"1px"}},"spacing":{"margin":{"top":"var:preset|spacing|50"},"padding":{"top":"var:preset|spacing|30"},"blockGap":"1.25rem"}},"layout":{"type":"flex","flexWrap":"wrap","justifyContent":"space-between","verticalAlignment":"top"}} -->
<div class="wp-block-group" style="border-top-color:currentColor;border-top-style:solid;border-top-width:1px;margin-top:var(--wp--preset--spacing--50);padding-top:var(--wp--preset--spacing--30)"><!-- wp:group {"style":{"spacing":{"blockGap":"0.875rem"}},"layout":{"type":"flex","flexWrap":"nowrap","verticalAlignment":"center"}} -->
<div class="wp-block-group"><!-- wp:image {"aspectRatio":"1","scale":"cover","sizeSlug":"large","linkDestination":"none","width":"6.5rem","style":{"spacing":{"margin":{"top":"0","bottom":"0"}}}} -->
<figure class="wp-block-image size-large is-resized" style="margin-top:0;margin-bottom:0"><img src="https://patternpaste.com/previews/_assets/portrait-10-head.jpg" alt="Head and shoulders of a woman in their 50s with silver-streaked dark hair loosely tied back, wearing a navy blouse, against a warm grey background." style="aspect-ratio:1;object-fit:cover;width:6.5rem"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--role-label, var(--wp--preset--color--contrast, var(--wp--preset--color--black)))"},"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"clamp(0.9375rem, 1.1vw, 1rem)","fontWeight":"600","letterSpacing":"0.18em","textTransform":"uppercase"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--role-label, var(--wp--preset--color--contrast, var(--wp--preset--color--black)));margin-top:0;margin-bottom:0;font-size:clamp(0.9375rem, 1.1vw, 1rem);font-weight:600;letter-spacing:0.18em;text-transform:uppercase">Marguerite Vaillancourt</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--medium, clamp(0.9375rem, 1.1vw, 1rem))"}}} -->
<p style="margin-top:0;margin-bottom:0;font-size:var(--wp--preset--font-size--medium, clamp(0.9375rem, 1.1vw, 1rem))">Head of marketing, Halfpenny &amp; Co</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->
Back to Core Patterns

Continue exploring

Next in Testimonials

Explore all 17 Testimonials patterns

Reviews score summary rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveTestimonialsNo plugin needed

Reviews score summary

A review summary for a local business.

TestimonialsPreview pattern
Testimonial cover quote rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveTestimonialsNo 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.

TestimonialsPreview pattern
Testimonial lead and rail rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveTestimonialsNo 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.

TestimonialsPreview pattern