Styled Quotation Boxes

A commonly used feature on sites is the inclusion of quotes – either from clients, authors, customers. This helps bring a more personal touch to a specific page, and gives a visitor a great indiciation of your service’s popularity.

Demo: image-free styled <blockquote> boxes with generated quote marks and equal heights via flexbox. Originally a CodePen (“Styled Quotation Boxes”, solarisedesign/NqJwxG).

2026 update The CodePen embed is being re-hosted here; the interactive version will return.

I wanted to create a styled version of the traditional HTML <blockquote> element

I also wanted some nice background elements, and also felt that the inclusion of images should be avoided where possible, as it adds to asset overhead, and over-complicates what can otherwise be a very simple thing in modern CSS3 development.

This is a fairly straightforward little project, but a great demonstration of some of the subtle, but powerful effects achievable with CSS

Backwards compatibility

This demo should funciton well across all browsers – degrading cleanly to a more basic layout/appearance on browsers which don’t support CSS3 features (list)

Technical notes

I wanted to build this in a way that used the fewest possible HTML semantic elements. I’m a firm believe in keeping HTML markup as lean as possible, not introducing any extra structure unless absolutely necessary.

A single quote box consists of the following HTML

<div class="quotes">
    <blockquote>
      <p>Quotation</p>
      <footer>
        - Author
      </footer>
    </blockquote>
</div>

No additional images or javascript have been used. The "Quote mark" elements are ‘content’ properties in the ::before and ::after elements. This is a technique I often use, it’s widely supported.

I’ve also thrown in a few pieces of flexbox functionality to properly align the quotation boxes. This means that they will dynamically scale and reposition based on the viewport width/height.

And, of course, the use of flexbox means that the blockquote elements can all have matching heights (Non-developers/designers likely won’t understand the frustration caused by hearing the query "Can all these elements be the same height?" in the pre-CSS3 days!)

You’ll notice I’ve also defined a media query for smaller viewports which adjusts the flex direction to column, so that the quotes are always readable.

Heads up The “degrades cleanly on browsers which don’t support CSS3” caveat is moot now — flexbox and generated content are universally supported, so there’s no non-CSS3 fallback to worry about.

The one thing worth swapping is that final viewport media query. A quote box that needs to switch to a column layout should respond to its own available width, not the whole viewport — that’s exactly what container queries are for, so the same component works dropped into a wide page or a narrow sidebar:

.quotes { container-type: inline-size; }

@container (max-width: 30rem) {
  .quotes blockquote { flex-direction: column; }
}

And text-wrap: balance on the quotation <p> gives shorter quotes tidier, more even line lengths for free.

All articles

Backwards compatibility

Technical notes

Let's talk.

Let's talk.