19 CSS Blockquote Designs 16 / 19
Markdown Quote
GitHub-style markdown blockquote — left rule, dim text, > prefix character — with a small MD pill in the corner.
The code
<figure class="cbq-md">
<span class="cbq-md-pill">MD</span>
<blockquote>
<p><span class="cbq-md-gt">></span> The best abstractions are the ones you don't notice.</p>
<p><span class="cbq-md-gt">></span> The worst are the ones you can't avoid.</p>
</blockquote>
<figcaption>— from <code>NOTES.md</code></figcaption>
</figure> <figure class="cbq-md">
<span class="cbq-md-pill">MD</span>
<blockquote>
<p><span class="cbq-md-gt">></span> The best abstractions are the ones you don't notice.</p>
<p><span class="cbq-md-gt">></span> The worst are the ones you can't avoid.</p>
</blockquote>
<figcaption>— from <code>NOTES.md</code></figcaption>
</figure>.cbq-md {
position: relative;
max-width: 340px;
padding: 18px 18px 14px 22px;
background: #0d1117;
border-left: 4px solid #30363d;
border-radius: 0 6px 6px 0;
font-family: ui-monospace, monospace;
color: #c9d1d9;
}
.cbq-md-pill {
position: absolute;
top: 8px;
right: 10px;
padding: 1px 6px;
border-radius: 3px;
background: rgba(124, 108, 255, 0.18);
color: #a78bfa;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.06em;
}
.cbq-md blockquote {
margin: 0;
}
.cbq-md p {
margin: 0 0 6px;
font-size: 13.5px;
line-height: 1.55;
}
.cbq-md p:last-of-type {
margin-bottom: 0;
}
.cbq-md-gt {
color: #6e7681;
margin-right: 6px;
user-select: none;
}
.cbq-md figcaption {
margin-top: 12px;
font-size: 11px;
color: #6e7681;
}
.cbq-md code {
background: rgba(110, 118, 129, 0.4);
padding: 1px 5px;
border-radius: 3px;
color: #c9d1d9;
font-size: 11px;
} .cbq-md {
position: relative;
max-width: 340px;
padding: 18px 18px 14px 22px;
background: #0d1117;
border-left: 4px solid #30363d;
border-radius: 0 6px 6px 0;
font-family: ui-monospace, monospace;
color: #c9d1d9;
}
.cbq-md-pill {
position: absolute;
top: 8px;
right: 10px;
padding: 1px 6px;
border-radius: 3px;
background: rgba(124, 108, 255, 0.18);
color: #a78bfa;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.06em;
}
.cbq-md blockquote {
margin: 0;
}
.cbq-md p {
margin: 0 0 6px;
font-size: 13.5px;
line-height: 1.55;
}
.cbq-md p:last-of-type {
margin-bottom: 0;
}
.cbq-md-gt {
color: #6e7681;
margin-right: 6px;
user-select: none;
}
.cbq-md figcaption {
margin-top: 12px;
font-size: 11px;
color: #6e7681;
}
.cbq-md code {
background: rgba(110, 118, 129, 0.4);
padding: 1px 5px;
border-radius: 3px;
color: #c9d1d9;
font-size: 11px;
}