19 CSS Blockquote Designs 14 / 19
Newspaper
Serif typeface, justified text, drop-cap on the first letter — old-school broadsheet feel.
The code
<figure class="cbq-news">
<blockquote>
<p>
Software is a love letter to the future, written in the dialect of the present. Each
abstraction we choose narrows what tomorrow can say.
</p>
</blockquote>
<figcaption>— The Architect's Notebook, Vol. 3</figcaption>
</figure> <figure class="cbq-news">
<blockquote>
<p>
Software is a love letter to the future, written in the dialect of the present. Each
abstraction we choose narrows what tomorrow can say.
</p>
</blockquote>
<figcaption>— The Architect's Notebook, Vol. 3</figcaption>
</figure>.cbq-news {
max-width: 360px;
padding: 18px 6px;
font-family: Georgia, "Times New Roman", serif;
color: #f5f5f5;
}
.cbq-news blockquote {
margin: 0;
}
.cbq-news p {
margin: 0;
font-size: 14.5px;
line-height: 1.6;
text-align: justify;
hyphens: auto;
}
.cbq-news p::first-letter {
float: left;
font-size: 48px;
line-height: 0.95;
padding: 4px 8px 0 0;
font-weight: 700;
color: #ffd479;
}
.cbq-news figcaption {
margin-top: 14px;
font-size: 11px;
color: #b8b6d4;
font-style: italic;
text-align: right;
} .cbq-news {
max-width: 360px;
padding: 18px 6px;
font-family: Georgia, "Times New Roman", serif;
color: #f5f5f5;
}
.cbq-news blockquote {
margin: 0;
}
.cbq-news p {
margin: 0;
font-size: 14.5px;
line-height: 1.6;
text-align: justify;
hyphens: auto;
}
.cbq-news p::first-letter {
float: left;
font-size: 48px;
line-height: 0.95;
padding: 4px 8px 0 0;
font-weight: 700;
color: #ffd479;
}
.cbq-news figcaption {
margin-top: 14px;
font-size: 11px;
color: #b8b6d4;
font-style: italic;
text-align: right;
}