Code Comment
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.
Code Comment the 15th of 19 designs in the 19 CSS Blockquote Designs collection. The design is implemented in pure CSS — no JavaScript required. Copy the HTML and CSS panels below into your project. Because the demo is pure CSS, it works in any framework or templating engine you happen to use. The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<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> .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;
}