19 CSS Blockquote Designs 02 / 19
Brutalist Stamp
Hard-edged offset-shadow card with mono font and a hot-pink accent — zero radius, zero apology.
The code
<figure class="cbq-brut">
<blockquote>
<p>SHIP IT. THE DOCS CAN COME LATER.</p>
</blockquote>
<figcaption>— anonymous senior dev</figcaption>
</figure> <figure class="cbq-brut">
<blockquote>
<p>SHIP IT. THE DOCS CAN COME LATER.</p>
</blockquote>
<figcaption>— anonymous senior dev</figcaption>
</figure>.cbq-brut {
max-width: 320px;
padding: 22px 22px 16px;
background: #fff7ed;
border: 2px solid #0a0a0a;
box-shadow: 7px 7px 0 #ff3d6e;
font-family: "Courier New", monospace;
color: #0a0a0a;
}
.cbq-brut blockquote {
margin: 0;
}
.cbq-brut p {
margin: 0;
font-size: 14px;
font-weight: 700;
letter-spacing: 0.02em;
line-height: 1.45;
}
.cbq-brut figcaption {
margin-top: 12px;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.12em;
color: #ff3d6e;
} .cbq-brut {
max-width: 320px;
padding: 22px 22px 16px;
background: #fff7ed;
border: 2px solid #0a0a0a;
box-shadow: 7px 7px 0 #ff3d6e;
font-family: "Courier New", monospace;
color: #0a0a0a;
}
.cbq-brut blockquote {
margin: 0;
}
.cbq-brut p {
margin: 0;
font-size: 14px;
font-weight: 700;
letter-spacing: 0.02em;
line-height: 1.45;
}
.cbq-brut figcaption {
margin-top: 12px;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.12em;
color: #ff3d6e;
}