Pull Quote
Magazine-style tabloid pull quote — large display font, tight leading, no rule. The kind editorial sites use to break up long-form articles.
Pull Quote the 5th of 19 designs in the 19 CSS Blockquote Designs collection. The design is implemented in pure CSS — no JavaScript required. Copy the HTML and CSS panels below into your project. Because the demo is pure CSS, it works in any framework or templating engine you happen to use. The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<figure class="cbq-pull">
<blockquote>
<p>"Every line of code you don't write is a line of code that can't break."</p>
</blockquote>
<figcaption>From <cite>The Pragmatic Programmer</cite></figcaption>
</figure> .cbq-pull {
max-width: 360px;
padding: 18px 4px;
font-family: Georgia, "Times New Roman", serif;
color: #f5f5f5;
}
.cbq-pull blockquote {
margin: 0;
}
.cbq-pull p {
margin: 0;
font-size: 26px;
line-height: 1.18;
font-weight: 700;
letter-spacing: -0.01em;
color: #f5f5f5;
}
.cbq-pull figcaption {
margin-top: 14px;
padding-top: 10px;
border-top: 1px solid rgba(255, 255, 255, 0.18);
font-size: 11px;
color: #b8b6d4;
text-transform: uppercase;
letter-spacing: 0.14em;
font-family: system-ui, sans-serif;
}
.cbq-pull cite {
color: #c7c4ff;
font-style: italic;
text-transform: none;
letter-spacing: 0;
}