19 CSS Blockquote Designs

Newspaper

Serif typeface, justified text, drop-cap on the first letter — old-school broadsheet feel. Pairs with editorial themes and longform pages.

Newspaper the 14th 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-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>

.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: #b8b6d4;
  font-style: italic;
  text-align: right;
}