[Library] 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 name tracked wide at one end and the role at the other. States no colour and no font of its own.

Variation View
Before you copy
Open in a new window

Identical markup in every theme. Manrope typeface rgb(255, 255, 255) ground 1280px viewport

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.

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.
  • 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 first172 words
  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 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.
  3. The band's height. Padding is spacing preset 80 top and bottom. Step it to 70 if your theme's scale is already generous.
  4. 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.
  5. 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 variation33 words
  • 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.
Notes114 words
  • Core blocks only: group, columns, column, paragraph. 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 type24 words

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)

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.

4,400 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)"}}},"layout":{"type":"constrained","contentSize":"1240px"}} -->
<div class="wp-block-group alignfull has-text-color has-background" 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":"clamp(0.75rem, 2vw, 2rem)"}}}} -->
<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":"clamp(0.75rem, 2vw, 2rem)"}},"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: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 -->

<!-- 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,508 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)"}}},"layout":{"type":"constrained","contentSize":"1240px"}} -->
<div class="wp-block-group alignfull has-text-color has-background" 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":"clamp(0.75rem, 2vw, 2rem)"}}}} -->
<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--contrast, var(--wp--preset--color--black))"},"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--contrast, var(--wp--preset--color--black));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--contrast, var(--wp--preset--color--black))"},"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--contrast, var(--wp--preset--color--black));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":"clamp(0.75rem, 2vw, 2rem)"}},"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: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 -->

<!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--contrast, var(--wp--preset--color--black))"},"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--contrast, var(--wp--preset--color--black));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 the library

Continue exploring

Next in Testimonials

Explore all 4 Testimonials patterns