Classic Mark
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.
Classic Mark the 1st 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-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> .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: #b8b6d4;
font-style: normal;
}