Social proof
Full-width pull quote
One large quote on a tinted band, with an attribution line underneath.
When to use it
Use one strong quote instead of three weak ones. This band works well immediately after a long explanatory section, where a reader needs a pause more than another list. Because it is a single centred column with no grid, it is the least fragile block in the library: there is nothing to collapse, nothing to reorder, and nothing that behaves differently on a phone beyond the font size.
What it converts to
Converted with the Native components mode. The component list below is what this template produces — not a generic example.
- Container × 1 — the tinted band
- Container × 1 — the inner max-width wrapper
- Text Editor × 1 — the quote
- Text Editor × 1 — the attribution
Things worth knowing
- The oversized quotation mark is a text character rather than a pseudo-element on purpose. Pseudo-element content cannot be read from static HTML, so a ::before quote mark would simply disappear on conversion.
- Keep the quote under about forty words. Past that it stops being a pull quote and should be a paragraph in the section above.
- The band colour is a Container background, so you can retint it from one control after import.
The HTML
This is the complete source. Copy it, or send it straight to the converter and adjust the options before exporting.
Show the HTML source
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Full-width pull quote</title>
<style>
body{margin:0;font-family:Arial,Helvetica,sans-serif;color:#14233a}
.band{background:#fff4ef;padding:78px 24px;text-align:center}
.inner{max-width:780px;margin:0 auto}
.mark{display:block;font-size:56px;line-height:1;color:#ff5b35;margin:0 0 14px;font-weight:800}
.quote{margin:0 0 20px;font-size:26px;line-height:1.55;letter-spacing:-.02em;color:#1b2e49}
.by{margin:0;font-size:14px;color:#8a6a5c}
@media(max-width:700px){.band{padding:54px 20px}.quote{font-size:20px}}
</style>
</head>
<body>
<section class="band">
<div class="inner">
<span class="mark">“</span>
<p class="quote">Replace this with one quote that says something specific. A sentence a reader could not have guessed is worth more than three that could apply to anyone.</p>
<p class="by">Attribution line — name, role, company</p>
</div>
</section>
</body>
</html>