"It saves me hours every week."
19 examples Responsive Uses JS beginner
19 CSS Blockquote Designs
A CSS blockquote is a styled quotation rendered with the semantic figure + blockquote + figcaption pattern. These 19 hand-coded designs cover every common form: editorial pull quotes, testimonial cards, speech bubbles, magazine drop-caps, brutalist stamps, glass and neon variants, hand-drawn marker underlines, aurora-drift premium accents, X/Twitter-style callouts, GitHub code-comment blocks, markdown READMEs, an auto-rotating testimonial carousel, click-to-expand truncation, and a copy-quote-to-clipboard button. Every demo uses real semantic HTML, scoped class-based CSS, and JavaScript only where it adds real interaction.
19 hand-coded CSS blockquote designs — classic mark, brutalist, glass, neon, pull quote, speech bubble, vertical rail, testimonial card, highlighted run, marker underline, drop-shadow float, aurora drift, tweet style, newspaper drop-cap, code comment, markdown quote, carousel, click-to-expand, and copy-to-clipboard. Every demo uses semantic <figure> + <blockquote> + <figcaption>, scoped class-based CSS, and JavaScript only where it adds real interaction.
01 / 19
Classic Mark
Pure CSS Design is not just what it looks like and feels like. Design is how it works.
A large violet open-quote glyph rendered as a CSS pseudo-element above an italic body, with a thin left rule. The benchmark every blockquote is measured against.
.cbq-classic {
position: relative;
max-width: 360px;
padding: 28px 28px 18px;
background: #1a1a26;
border-left: 3px solid #7c6cff;
border-radius: 6px;
font-family: Georgia, serif;
color: #e9e7ff;
}
.cbq-classic::before {
content: '\201C';
position: absolute;
top: -10px; left: 14px;
font-family: Georgia, serif;
font-size: 64px;
line-height: 1;
color: #7c6cff;
}
.cbq-classic blockquote { margin: 0; }
.cbq-classic p { margin: 0; font-size: 14px; line-height: 1.55; font-style: italic; }
.cbq-classic figcaption { margin-top: 10px; font-size: 12px; color: #9d9bbf; font-style: normal; } <figure class="cbq-classic">
<blockquote>
<p>Design is not just what it looks like and feels like. Design is how it works.</p>
</blockquote>
<figcaption>— Steve Jobs</figcaption>
</figure> 02 / 19
Brutalist Stamp
Pure CSS SHIP IT. THE DOCS CAN COME LATER.
Hard-edged offset-shadow card with mono font and a hot-pink accent — zero radius, zero apology. Brutalist design system fixture.
.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;
} <figure class="cbq-brut">
<blockquote>
<p>SHIP IT. THE DOCS CAN COME LATER.</p>
</blockquote>
<figcaption>— anonymous senior dev</figcaption>
</figure> 03 / 19
Glass Card
Pure CSS The best UI is the one you don't notice.
Frosted-glass shell on a soft gradient backdrop — translucent surface, subtle inner highlight, backdrop-filter blur. Perfect over hero images.
.cbq-glass-bg {
padding: 28px;
border-radius: 14px;
background: linear-gradient(135deg, #7c6cff 0%, #ff6c8a 50%, #2eb88a 100%);
}
.cbq-glass {
max-width: 320px;
padding: 22px;
border-radius: 14px;
background: rgba(255,255,255,0.16);
border: 1px solid rgba(255,255,255,0.28);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.35);
color: #fff;
font-family: system-ui, sans-serif;
}
.cbq-glass blockquote { margin: 0; }
.cbq-glass p { margin: 0; font-size: 14px; font-weight: 500; line-height: 1.5; }
.cbq-glass figcaption { margin-top: 12px; font-size: 11px; opacity: 0.85; } <div class="cbq-glass-bg">
<figure class="cbq-glass">
<blockquote>
<p>The best UI is the one you don't notice.</p>
</blockquote>
<figcaption>— Lena Park, Product Designer</figcaption>
</figure>
</div> 04 / 19
Neon Border
Pure CSS Optimize for joy. The metrics will follow.
Synthwave cyan glowing outline that pulses gently — built for dark dashboards, gaming UIs, and developer tools.
.cbq-neon {
max-width: 320px;
padding: 22px;
background: #0a0a18;
border: 1.5px solid #00e5ff;
border-radius: 10px;
box-shadow: 0 0 0 1px rgba(0,229,255,0.2), 0 0 18px rgba(0,229,255,0.35);
color: #d8f7ff;
font-family: ui-monospace, monospace;
animation: cbq-neon-pulse 3.2s ease-in-out infinite;
}
.cbq-neon blockquote { margin: 0; }
.cbq-neon p { margin: 0; font-size: 14px; line-height: 1.55; }
.cbq-neon figcaption { margin-top: 12px; font-size: 11px; color: #00e5ff; letter-spacing: 0.06em; }
@keyframes cbq-neon-pulse {
0%, 100% { box-shadow: 0 0 0 1px rgba(0,229,255,0.2), 0 0 18px rgba(0,229,255,0.35); }
50% { box-shadow: 0 0 0 1px rgba(0,229,255,0.32), 0 0 26px rgba(0,229,255,0.55); }
}
@media (prefers-reduced-motion: reduce) { .cbq-neon { animation: none; } } <figure class="cbq-neon">
<blockquote>
<p>Optimize for joy. The metrics will follow.</p>
</blockquote>
<figcaption>— k. tanaka, eng lead</figcaption>
</figure> 05 / 19
Pull Quote
Pure CSS "Every line of code you don't write is a line of code that can't break."
Magazine-style tabloid pull quote — large display font, tight leading, no rule. The kind editorial sites use to break up long-form articles.
.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: #9d9bbf;
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; } <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> 06 / 19
Speech Bubble
Pure CSS Codefronts cut my prototype time in half. Just snippets that work.
Chat-style rounded bubble with a tail pointing to the avatar. Common pattern for testimonial walls, support pages, and case studies.
.cbq-speech { max-width: 320px; font-family: system-ui, sans-serif; }
.cbq-speech-bubble {
position: relative;
padding: 16px 18px;
background: #1f1f2e;
border: 1px solid rgba(255,255,255,0.07);
border-radius: 16px 16px 16px 4px;
color: #f0eeff;
}
.cbq-speech-bubble::before {
content: '';
position: absolute;
bottom: -6px; left: 18px;
width: 12px; height: 12px;
background: #1f1f2e;
border-right: 1px solid rgba(255,255,255,0.07);
border-bottom: 1px solid rgba(255,255,255,0.07);
transform: rotate(45deg);
}
.cbq-speech-bubble blockquote { margin: 0; }
.cbq-speech-bubble p { margin: 0; font-size: 13.5px; line-height: 1.55; }
.cbq-speech-meta {
display: flex; align-items: center; gap: 10px;
margin-top: 16px; padding-left: 8px;
font-size: 12px; color: #9d9bbf;
}
.cbq-speech-avatar {
display: inline-flex; align-items: center; justify-content: center;
width: 26px; height: 26px;
border-radius: 50%;
background: linear-gradient(135deg, #7c6cff, #ff6c8a);
font-weight: 700; font-size: 12px; color: #fff;
}
.cbq-speech-meta strong { color: #f0eeff; font-weight: 600; } <figure class="cbq-speech">
<div class="cbq-speech-bubble">
<blockquote>
<p>Codefronts cut my prototype time in half. Just snippets that work.</p>
</blockquote>
</div>
<figcaption class="cbq-speech-meta">
<span class="cbq-speech-avatar" aria-hidden="true">A</span>
<span><strong>Aisha M.</strong> · frontend dev</span>
</figcaption>
</figure> 07 / 19
Vertical Rail
Pure CSS Constraints don't kill creativity — they sharpen it.
Thin gradient rail on the left edge that brightens on :hover — editorial restraint. Perfect for long-form articles with multiple call-out quotes.
.cbq-rail {
max-width: 340px;
padding: 14px 18px;
position: relative;
font-family: Georgia, serif;
color: #e0deff;
transition: padding-left 0.25s ease;
}
.cbq-rail::before {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: 3px;
background: linear-gradient(180deg, #7c6cff, #2eb88a);
border-radius: 3px;
opacity: 0.5;
transition: opacity 0.25s ease, width 0.25s ease;
}
.cbq-rail:hover::before { opacity: 1; width: 5px; }
.cbq-rail blockquote { margin: 0; }
.cbq-rail p { margin: 0; font-size: 16px; line-height: 1.5; font-style: italic; }
.cbq-rail figcaption { margin-top: 10px; font-size: 12px; color: #9d9bbf; font-style: normal; } <figure class="cbq-rail">
<blockquote>
<p>Constraints don't kill creativity — they sharpen it.</p>
</blockquote>
<figcaption>— Maya Chen</figcaption>
</figure> 08 / 19
Testimonial Card
Pure CSS
★★★★★
"The component library I wished existed for years. Just works."
Testimonial card with avatar, name, role, 5-star row and a soft shadow. Production-grade pattern for landing pages and case-study walls.
.cbq-stamp {
max-width: 320px;
padding: 22px;
background: #18181f;
border: 1px solid rgba(255,255,255,0.07);
border-radius: 16px;
box-shadow: 0 8px 32px rgba(124,108,255,0.08);
font-family: system-ui, sans-serif;
color: #f0eeff;
}
.cbq-stamp-stars { display: flex; gap: 2px; margin-bottom: 12px; color: #f5a84a; font-size: 14px; }
.cbq-stamp blockquote { margin: 0 0 16px; }
.cbq-stamp p { margin: 0; font-size: 14px; line-height: 1.5; }
.cbq-stamp figcaption {
display: flex; align-items: center; gap: 12px;
padding-top: 14px;
border-top: 1px solid rgba(255,255,255,0.06);
}
.cbq-stamp-avatar {
display: inline-flex; align-items: center; justify-content: center;
width: 38px; height: 38px;
border-radius: 50%;
background: linear-gradient(135deg, #7c6cff, #a78bfa);
font-weight: 700; font-size: 13px; color: #fff;
flex-shrink: 0;
}
.cbq-stamp-id { display: flex; flex-direction: column; gap: 2px; }
.cbq-stamp-id strong { font-size: 13px; font-weight: 600; color: #f0eeff; }
.cbq-stamp-id em { font-size: 11px; color: #9d9bbf; font-style: normal; } <figure class="cbq-stamp">
<div class="cbq-stamp-stars" aria-label="Rated 5 out of 5">
<span>★</span><span>★</span><span>★</span><span>★</span><span>★</span>
</div>
<blockquote>
<p>"The component library I wished existed for years. Just works."</p>
</blockquote>
<figcaption>
<span class="cbq-stamp-avatar" aria-hidden="true">JR</span>
<span class="cbq-stamp-id">
<strong>Jordan Rivera</strong>
<em>Senior Engineer · Stripe</em>
</span>
</figcaption>
</figure> 09 / 19
Highlighted Run
Pure CSS
Most teams optimize for shipping faster when they should be optimizing for shipping smaller.
Body text with a CSS mark-style highlight behind one punchy phrase — the editorial trick for drawing the eye to the key claim in a long quote.
.cbq-highlight {
max-width: 360px;
padding: 16px 4px;
font-family: Georgia, serif;
color: #e9e7ff;
}
.cbq-highlight blockquote { margin: 0; }
.cbq-highlight p { margin: 0; font-size: 18px; line-height: 1.5; font-weight: 500; }
.cbq-highlight mark {
background: linear-gradient(180deg, transparent 55%, rgba(124,108,255,0.55) 55%);
color: inherit;
padding: 0 2px;
border-radius: 2px;
}
.cbq-highlight figcaption { margin-top: 12px; font-size: 12px; color: #9d9bbf; font-family: system-ui, sans-serif; } <figure class="cbq-highlight">
<blockquote>
<p>Most teams optimize for <mark>shipping faster</mark> when they should be optimizing for <mark>shipping smaller</mark>.</p>
</blockquote>
<figcaption>— Sara López, Engineering Manager</figcaption>
</figure> 10 / 19
Marker Underline
Pure CSS Make the change easy first, then make the easy change.
Hand-drawn-look uneven SVG underline applied beneath the punchy phrase — the personal-blog flourish that makes a quote feel handwritten.
.cbq-marker {
max-width: 340px;
padding: 14px 4px;
font-family: Georgia, serif;
color: #f0eeff;
}
.cbq-marker blockquote { margin: 0; }
.cbq-marker p { margin: 0; font-size: 18px; line-height: 1.55; }
.cbq-marker-line {
position: relative;
white-space: nowrap;
color: #fff;
font-weight: 600;
}
.cbq-marker-line::after {
content: '';
position: absolute;
left: -2px; right: -2px; bottom: -4px;
height: 8px;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 8' preserveAspectRatio='none'><path d='M2 5 Q 30 1 60 4 T 118 5' stroke='%23ffd479' stroke-width='3' fill='none' stroke-linecap='round'/></svg>");
background-repeat: no-repeat;
background-size: 100% 100%;
}
.cbq-marker figcaption { margin-top: 12px; font-size: 12px; color: #9d9bbf; font-family: system-ui, sans-serif; } <figure class="cbq-marker">
<blockquote>
<p>Make the change <span class="cbq-marker-line">easy first</span>, then make the easy change.</p>
</blockquote>
<figcaption>— Kent Beck</figcaption>
</figure> 11 / 19
Drop Shadow Float
Pure CSS "You can have the best engine in the world, but without a chassis it's just noise."
Lifted card with a coloured shadow that intensifies on :hover — a subtle elevation cue that says this quote matters. Premium feel.
.cbq-float {
max-width: 320px;
padding: 24px;
background: #18181f;
border-radius: 16px;
border: 1px solid rgba(255,255,255,0.07);
box-shadow: 0 8px 24px rgba(124,108,255,0.18);
transform: translateY(0);
transition: transform 0.25s ease, box-shadow 0.25s ease;
font-family: system-ui, sans-serif;
color: #f0eeff;
}
.cbq-float:hover {
transform: translateY(-3px);
box-shadow: 0 14px 36px rgba(124,108,255,0.32);
}
.cbq-float blockquote { margin: 0; }
.cbq-float p { margin: 0; font-size: 14px; line-height: 1.55; font-style: italic; }
.cbq-float figcaption { margin-top: 14px; font-size: 12px; color: #a78bfa; } <figure class="cbq-float">
<blockquote>
<p>"You can have the best engine in the world, but without a chassis it's just noise."</p>
</blockquote>
<figcaption>— Eli Tan, CTO</figcaption>
</figure> 12 / 19
Aurora Drift
Pure CSS "Beauty in software is honesty rendered visible."
Slow-drifting aurora gradient blob behind a glass quote surface — the premium-product accent variant. Honours prefers-reduced-motion.
.cbq-aurora {
position: relative;
max-width: 340px;
padding: 28px;
border-radius: 18px;
background: #0d0d16;
overflow: hidden;
isolation: isolate;
font-family: system-ui, sans-serif;
}
.cbq-aurora-blob {
position: absolute;
inset: -40%;
background:
radial-gradient(40% 40% at 30% 30%, rgba(124,108,255,0.55), transparent 70%),
radial-gradient(40% 40% at 70% 60%, rgba(255,108,138,0.45), transparent 70%),
radial-gradient(35% 35% at 50% 80%, rgba(46,184,138,0.4), transparent 70%);
filter: blur(8px);
animation: cbq-aurora-drift 14s linear infinite;
z-index: 0;
}
.cbq-aurora-card {
position: relative; z-index: 1;
padding: 18px;
border-radius: 14px;
background: rgba(13,13,22,0.55);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,0.1);
color: #f0eeff;
}
.cbq-aurora blockquote { margin: 0; }
.cbq-aurora p { margin: 0; font-size: 14.5px; line-height: 1.55; font-weight: 500; }
.cbq-aurora figcaption { margin-top: 12px; font-size: 11px; color: rgba(240,238,255,0.7); }
@keyframes cbq-aurora-drift {
0% { transform: translate(0,0) rotate(0deg); }
50% { transform: translate(4%, -4%) rotate(180deg); }
100% { transform: translate(0,0) rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) { .cbq-aurora-blob { animation: none; } } <figure class="cbq-aurora">
<span class="cbq-aurora-blob" aria-hidden="true"></span>
<div class="cbq-aurora-card">
<blockquote><p>"Beauty in software is honesty rendered visible."</p></blockquote>
<figcaption>— Lin Wei</figcaption>
</div>
</figure> 13 / 19
Tweet Style
Pure CSS I would rather read codefronts than write CSS from scratch in 2026, and that's a hill I'm willing to die on.
Twitter/X-styled callout — bird/X icon, name, handle, timestamp, and like/retweet glyphs. Native to dev audiences and a great social-proof pattern.
.cbq-tweet {
max-width: 340px;
padding: 14px 16px;
background: #15151d;
border: 1px solid rgba(255,255,255,0.1);
border-radius: 14px;
font-family: system-ui, sans-serif;
color: #e7e9ea;
}
.cbq-tweet-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.cbq-tweet-avatar {
width: 36px; height: 36px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, #7c6cff, #2eb88a);
font-size: 12px; font-weight: 700; color: #fff;
flex-shrink: 0;
}
.cbq-tweet-id { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.cbq-tweet-id strong { font-size: 13.5px; font-weight: 700; color: #fff; }
.cbq-tweet-id em { font-size: 12px; color: #71767b; font-style: normal; }
.cbq-tweet-x { width: 18px; height: 18px; color: #fff; flex-shrink: 0; }
.cbq-tweet blockquote { margin: 0 0 10px; }
.cbq-tweet p { margin: 0; font-size: 14px; line-height: 1.45; }
.cbq-tweet-foot { display: flex; gap: 18px; font-size: 12px; color: #71767b; } <figure class="cbq-tweet">
<header class="cbq-tweet-head">
<span class="cbq-tweet-avatar" aria-hidden="true">DM</span>
<span class="cbq-tweet-id">
<strong>Dana M.</strong>
<em>@danamcode · 2h</em>
</span>
<svg class="cbq-tweet-x" viewBox="0 0 24 24" aria-hidden="true"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.744l7.73-8.835L2.25 2.25h6.962l4.265 5.638L18.244 2.25z" fill="currentColor"/></svg>
</header>
<blockquote><p>I would rather read codefronts than write CSS from scratch in 2026, and that's a hill I'm willing to die on.</p></blockquote>
<footer class="cbq-tweet-foot">
<span aria-label="42 replies">💬 42</span>
<span aria-label="231 reposts">🔁 231</span>
<span aria-label="1.2k likes">♡ 1.2k</span>
</footer>
</figure> 14 / 19
Newspaper
Pure CSS Software is a love letter to the future, written in the dialect of the present. Each abstraction we choose narrows what tomorrow can say.
Serif typeface, justified text, drop-cap on the first letter — old-school broadsheet feel. Pairs with editorial themes and longform pages.
.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: #9d9bbf;
font-style: italic;
text-align: right;
} <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> 15 / 19
Code Comment
Pure CSS // Don't write code that's so clever
// that you can't debug it at 3am
Quote styled as a code-comment block — mono font, dim grey "filename:line" header, // prefix on each line. Perfect for dev portfolios and engineering blogs.
.cbq-code {
max-width: 360px;
background: #0d1117;
border: 1px solid rgba(255,255,255,0.08);
border-radius: 8px;
overflow: hidden;
font-family: ui-monospace, 'SF Mono', monospace;
color: #e6edf3;
}
.cbq-code-head {
display: flex; align-items: center; gap: 8px;
padding: 8px 14px;
background: #161b22;
border-bottom: 1px solid rgba(255,255,255,0.06);
}
.cbq-code-dot { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; }
.cbq-code-file { margin-left: 8px; font-size: 11px; color: #8b949e; }
.cbq-code blockquote { margin: 0; padding: 16px 18px; }
.cbq-code p { margin: 0; font-size: 13px; line-height: 1.65; color: #7c6cff; font-style: italic; }
.cbq-code figcaption {
padding: 6px 18px 12px;
font-size: 11px;
color: #8b949e;
} <figure class="cbq-code">
<header class="cbq-code-head">
<span class="cbq-code-dot" aria-hidden="true"></span>
<span class="cbq-code-dot" style="background:#f5a84a"></span>
<span class="cbq-code-dot" style="background:#2eb88a"></span>
<span class="cbq-code-file">manifesto.js · ln 12</span>
</header>
<blockquote>
<p>// Don't write code that's so clever<br/>// that you can't debug it at 3am</p>
</blockquote>
<figcaption>— Brian Kernighan</figcaption>
</figure> 16 / 19
Markdown Quote
Pure CSS > The best abstractions are the ones you don't notice.
> The worst are the ones you can't avoid.
NOTES.mdGitHub-style markdown blockquote — left rule, dim text, > prefix character — with a small MD pill in the corner. Native to the README aesthetic.
.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; } <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> 17 / 19
Testimonial Carousel
Light JS "Finally, snippets that don't fight my stack."
"My team's dashboard ships twice as fast."
Three testimonials with dot pagination and arrow keys — auto-advances every 6s, pauses on hover/focus, uses aria-live=polite for screen-reader announcement.
.cbq-car {
max-width: 340px;
padding: 24px 22px 18px;
background: #18181f;
border: 1px solid rgba(255,255,255,0.07);
border-radius: 16px;
font-family: system-ui, sans-serif;
color: #f0eeff;
}
.cbq-car-track { min-height: 90px; position: relative; }
.cbq-car-slide blockquote { margin: 0 0 10px; }
.cbq-car-slide p { margin: 0; font-size: 14.5px; line-height: 1.5; font-style: italic; }
.cbq-car-slide figcaption { font-size: 12px; color: #a78bfa; }
.cbq-car-slide[hidden] { display: none; }
.cbq-car-dots { display: flex; gap: 6px; justify-content: center; margin-top: 14px; }
.cbq-car-dot {
width: 8px; height: 8px;
border-radius: 50%;
background: rgba(255,255,255,0.18);
border: 0; padding: 0; cursor: pointer;
transition: background 0.2s ease, transform 0.2s ease;
}
.cbq-car-dot:hover { background: rgba(255,255,255,0.32); }
.cbq-car-dot.is-active { background: #7c6cff; transform: scale(1.25); }
.cbq-car-dot:focus-visible { outline: 2px solid #a78bfa; outline-offset: 2px; } <figure class="cbq-car" aria-roledescription="carousel" aria-label="Testimonials">
<div class="cbq-car-track" aria-live="polite">
<article class="cbq-car-slide is-active">
<blockquote><p>"It saves me hours every week."</p></blockquote>
<figcaption>— Aria S., Designer</figcaption>
</article>
<article class="cbq-car-slide" hidden>
<blockquote><p>"Finally, snippets that don't fight my stack."</p></blockquote>
<figcaption>— Marcus T., DevOps</figcaption>
</article>
<article class="cbq-car-slide" hidden>
<blockquote><p>"My team's dashboard ships twice as fast."</p></blockquote>
<figcaption>— Priya R., Eng Lead</figcaption>
</article>
</div>
<nav class="cbq-car-dots" aria-label="Slide navigation">
<button type="button" class="cbq-car-dot is-active" aria-label="Go to slide 1" aria-current="true"></button>
<button type="button" class="cbq-car-dot" aria-label="Go to slide 2"></button>
<button type="button" class="cbq-car-dot" aria-label="Go to slide 3"></button>
</nav>
</figure> (function () {
document.querySelectorAll('.cbq-car').forEach(function (root) {
var slides = root.querySelectorAll('.cbq-car-slide');
var dots = root.querySelectorAll('.cbq-car-dot');
var idx = 0, timer = null;
function show(i) {
idx = (i + slides.length) % slides.length;
slides.forEach(function (s, n) {
if (n === idx) { s.removeAttribute('hidden'); s.classList.add('is-active'); }
else { s.setAttribute('hidden', ''); s.classList.remove('is-active'); }
});
dots.forEach(function (d, n) {
var on = n === idx;
d.classList.toggle('is-active', on);
if (on) d.setAttribute('aria-current', 'true'); else d.removeAttribute('aria-current');
});
}
function start() { stop(); timer = setInterval(function () { show(idx + 1); }, 6000); }
function stop() { if (timer) { clearInterval(timer); timer = null; } }
dots.forEach(function (d, n) { d.addEventListener('click', function () { show(n); start(); }); });
root.addEventListener('mouseenter', stop);
root.addEventListener('mouseleave', start);
root.addEventListener('focusin', stop);
root.addEventListener('focusout', start);
root.addEventListener('keydown', function (e) {
if (e.key === 'ArrowRight') { e.preventDefault(); show(idx + 1); start(); }
if (e.key === 'ArrowLeft') { e.preventDefault(); show(idx - 1); start(); }
});
if (!window.matchMedia('(prefers-reduced-motion: reduce)').matches) start();
});
})(); 18 / 19
Click to Expand
Light JS Long quote truncated with -webkit-line-clamp; a Read more button reveals the rest. aria-expanded reflects state for screen readers — the canonical truncate pattern.
.cbq-expand {
max-width: 340px;
padding: 22px;
background: #18181f;
border: 1px solid rgba(255,255,255,0.07);
border-radius: 14px;
font-family: system-ui, sans-serif;
color: #f0eeff;
}
.cbq-expand blockquote { margin: 0; }
.cbq-expand-text {
margin: 0;
font-size: 14px;
line-height: 1.55;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
transition: -webkit-line-clamp 0.3s ease;
}
.cbq-expand-text.is-open { -webkit-line-clamp: 99; }
.cbq-expand-btn {
margin-top: 10px;
padding: 4px 10px;
background: transparent;
color: #a78bfa;
border: 1px solid rgba(167,139,250,0.4);
border-radius: 6px;
font: inherit;
font-size: 12px;
cursor: pointer;
transition: background 0.15s, border-color 0.15s;
}
.cbq-expand-btn:hover { background: rgba(167,139,250,0.1); border-color: #a78bfa; }
.cbq-expand-btn:focus-visible { outline: 2px solid #a78bfa; outline-offset: 2px; }
.cbq-expand figcaption { margin-top: 14px; font-size: 12px; color: #9d9bbf; } <figure class="cbq-expand">
<blockquote>
<p class="cbq-expand-text">"Software engineering is not really about computers. It's about people: the people you build for, the people you build with, and the future-you who has to maintain whatever you ship today. Every line of code is a little contract with all of them."</p>
</blockquote>
<button type="button" class="cbq-expand-btn" aria-expanded="false">Read more</button>
<figcaption>— Jen Rodriguez, Staff Engineer</figcaption>
</figure> (function () {
document.querySelectorAll('.cbq-expand').forEach(function (root) {
var btn = root.querySelector('.cbq-expand-btn');
var text = root.querySelector('.cbq-expand-text');
if (!btn || !text) return;
btn.addEventListener('click', function () {
var open = text.classList.toggle('is-open');
btn.setAttribute('aria-expanded', String(open));
btn.textContent = open ? 'Read less' : 'Read more';
});
});
})(); 19 / 19
Copy Quote
Light JS "Premature optimization is the root of all evil."
Quote with a small Copy button that copies the text to the clipboard and flashes a Copied! confirmation — perfect for sharable design and engineering quote walls.
.cbq-copy {
position: relative;
max-width: 340px;
padding: 22px;
background: #18181f;
border: 1px solid rgba(255,255,255,0.07);
border-radius: 14px;
font-family: system-ui, sans-serif;
color: #f0eeff;
}
.cbq-copy-btn {
position: absolute;
top: 12px; right: 12px;
display: inline-flex; align-items: center; gap: 6px;
padding: 4px 10px;
background: rgba(255,255,255,0.04);
color: #a78bfa;
border: 1px solid rgba(255,255,255,0.1);
border-radius: 6px;
font: inherit;
font-size: 11px;
cursor: pointer;
transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.cbq-copy-btn:hover { background: rgba(167,139,250,0.12); border-color: rgba(167,139,250,0.45); }
.cbq-copy-btn:focus-visible { outline: 2px solid #a78bfa; outline-offset: 2px; }
.cbq-copy-btn.is-copied { color: #2ecc8a; border-color: rgba(46,204,138,0.45); background: rgba(46,204,138,0.08); }
.cbq-copy-quote { margin: 0; padding-right: 56px; }
.cbq-copy-quote p { margin: 0; font-size: 14.5px; line-height: 1.55; font-style: italic; }
.cbq-copy figcaption { margin-top: 14px; font-size: 12px; color: #9d9bbf; } <figure class="cbq-copy">
<button type="button" class="cbq-copy-btn" aria-label="Copy quote to clipboard">
<svg viewBox="0 0 24 24" aria-hidden="true" width="14" height="14"><rect x="9" y="9" width="11" height="11" rx="2" fill="none" stroke="currentColor" stroke-width="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
<span class="cbq-copy-label">Copy</span>
</button>
<blockquote class="cbq-copy-quote">
<p>"Premature optimization is the root of all evil."</p>
</blockquote>
<figcaption>— Donald Knuth</figcaption>
</figure> (function () {
document.querySelectorAll('.cbq-copy').forEach(function (root) {
var btn = root.querySelector('.cbq-copy-btn');
var label = root.querySelector('.cbq-copy-label');
var quote = root.querySelector('.cbq-copy-quote');
if (!btn || !label || !quote) return;
btn.addEventListener('click', function () {
var text = quote.textContent.trim();
navigator.clipboard.writeText(text).then(function () {
btn.classList.add('is-copied');
label.textContent = 'Copied!';
setTimeout(function () {
btn.classList.remove('is-copied');
label.textContent = 'Copy';
}, 1600);
});
});
});
})();
FAQ
Frequently asked questions
What's the right HTML for a blockquote?
Wrap the quotation in a blockquote element, attribute the source via figcaption inside a parent figure element, and use cite for the source title. The figure + blockquote + figcaption pattern is the W3C-recommended structure because it keeps the citation grouped with the quote semantically while letting screen readers identify each part correctly.
How do I add the big quote-mark decoration in pure CSS?
Use a ::before pseudo-element with content: '\201C' (the unicode left double quotation mark) and absolutely position it. Set a much larger font-size and a brand colour, and offset it slightly above and left of the quote text. This keeps the decoration purely presentational — assistive tech reads only the real quote text, not the giant decorative glyph.
Are these CSS blockquotes accessible?
Yes. Every demo uses semantic figure / blockquote / figcaption with proper attribution, real button elements for interactive controls (carousel, expand, copy), and ARIA where appropriate (aria-roledescription on the carousel, aria-live on the slide track, aria-expanded on the toggle, aria-label on icon-only controls). Continuous animations honour the prefers-reduced-motion media query.
Do these blockquotes need JavaScript?
Most don't. 16 of the 19 patterns are pure CSS using :hover, gradients, pseudo-elements, and animations. Only the carousel (slide auto-advance + arrow keys), click-to-expand (line-clamp toggle), and copy-quote (clipboard) include small self-contained JS snippets in the JS tab of the code panel.
Can I use these blockquotes in any framework?
Yes. Each demo is plain HTML and CSS (with optional vanilla JS) — no dependencies, no build step. Drop the markup into React (with className), Vue, Svelte, Astro or static HTML and the styles work as-is. MIT licensed.
