Drop Cap Quote Card
A clean quote card with a quote mark, a dark rounded drop cap and an uppercase byline.
Preview and code
index.html
<figure class='dc'><svg width='18' height='14' viewBox='0 0 18 14' fill='#c9c9c9'><path d='M0 14V7C0 3 2 .6 6 0v2.5C4 3 3.4 4.4 3.4 6H7v8zM10 14V7c0-4 2-6.400 6-7v2.500c-2 .5-2.600 1.900-2.600 3.500H17v8z'/></svg><p><b>D</b>esign systems thrive when typography, spacing, and imagery share one visual language. Every card should feel intentional.</p><figcaption>EDITORIAL TEAM</figcaption></figure>
styles.css
.dc{width:min(300px,92%);margin:auto;padding:22px;background:#fdfdfd;border:1px solid #efefef;border-radius:8px;font-family:Inter,Arial,sans-serif;color:#2d2d2d}.dc p{margin:14px 0 18px;font-size:14.5px;line-height:1.7}.dc b{float:left;display:grid;place-items:center;width:36px;height:36px;margin:2px 8px 0 0;background:#111;color:#fff;border-radius:8px;font:400 22px Georgia,serif}.dc figcaption{font-size:11px;font-weight:600;letter-spacing:.06em;color:#9a9a9a}
About
A text card for pull quotes: pale quotation glyph, serif drop-cap tile floated into the paragraph, and a small tracked attribution.