19 CSS Blockquote Designs 05 / 19
Pull Quote
Magazine-style tabloid pull quote — large display font, tight leading, no rule.
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> <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;
} .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;
}