Exploring Creativity Through Quotes

Block quotes and pull quotes are great for breaking up large sections of text and serving as visual markers to draw attention. There are no strict guidelines on the length, size, or style of a quote.

How can block quotes and pull quotes be designed to match a brand’s visual identity and narrative? Here’s my approach to styling the HTML blockquote element using borders, decorative quote marks, custom shapes, and some unexpected properties.

Patty Meltt is an emerging country music star who needed a website to promote her new album. She wanted it to be unique and memorable, so she reached out to Stuff & Nonsense. Though Patty is fictional, the challenges of designing and developing such sites are real.

First, a recap: There are no fixed rules on styling quotations. Block and pull quotes can both be visually appealing, but they serve different purposes. A block quote is usually part of the content flow, while a pull quote is extracted to stand alone.

The correct HTML for a block quote depends on its content. My design for Patty Meltt includes concert reviews with the reviewer’s name:

“Patty Meltt’s powerful ballads and toe-tapping anthems had the audience singing along all night.”

Here, the footer provides information about the source or author, making it suitable for attributions within a blockquote. But what about cite?

I used the cite element for attributions for years, but it’s meant for the title of a creative work, not a person’s name. For example:

“Patty Meltt’s powerful ballads and toe-tapping anthems had the audience singing along all night.”

In this example, footer marks the attribution, and cite indicates the publication title, enhancing semantic meaning and aiding screen reader users.

Styling with personality: Browsers do little to style blockquotes, aside from adding margins. Simple styling can transform them into expressive design elements that reflect a brand’s personality.

For Patty Meltt’s design, I wanted her quotes to feel confident and bold.

Tip: Interactive examples from this article are available in my lab.

Borders: A simple border can make quotes stand out and anchor them in a layout. A border separates a block quote from surrounding content, signaling a different voice from the main narrative.

In publications, block quotes often contrast with surrounding text. A full-width, bordered block quote encourages a pause.

A thin border feels understated:

“`css
blockquote {
padding-inline: 1.5rem;
border-inline-start: 1px solid #98838e;
border-inline-end: 1px solid #98838e;
}
“`

This may suit some brands, but not Patty’s. A thicker border feels more assertive:

“`css
blockquote {
padding-inline: 1.5rem;
border-inline-start: 5px solid #98838e;
border-inline-end: 5px solid #98838e;
}
“`

Borders needn’t fill the full height or width. Use ::before and ::after pseudo-elements for faux borders:

“`css
blockquote {
display: flex;
flex-direction: column;
align-items: center;
}

blockquote::before,
blockquote::after {
content: “”;
display: block;
width: 80px;
height: 5px;
background-color: #98838e;
}
“`

Animate faux borders with keyframe animations or transitions to increase width on interaction:

“`css
blockquote::before,
blockquote::after {
content: “”;
display: block;
width: 80px;
height: 5px;
background-color: #98838e;
transition: 300ms width ease-in-out;
}

blockquote:hover::before,
blockquote:hover::after {
width: 100%;
}
“`

Quote marks: Consider if you need quote marks. An HTML blockquote implies its content is a quotation, so screen readers and search engines recognize it. However, quote marks can visually emphasize content and add interest.

Are both opening and closing marks necessary? Possibly, for a traditional feel or when a quote appears in running text:

“`css
blockquote {
position: relative;
padding-inline: 64px;
}

blockquote img:first-of-type,
blockquote img:last-of-type {
position: absolute;
}

blockquote img:first-of-type {
top: 0;
left: 0;
}

blockquote img:last-of-type {
right: 0;
bottom: 0;
}
“`

For an editorial feel, use a decorative oversized opening mark for a pull quote:

“`css
blockquote {