Content

Blockquote

A styled pull-quote with optional author and source.

Live demo

See it in action

Classic — accent left border

Design is not just what it looks like and feels like. Design is how it works.

Steve JobsCo-founder, Apple

Pullquote — large, centered

Simplicity is the ultimate sophistication.

Leonardo da Vinci

Card — boxed with a tinted background

UnysonPlus replaced three paid plugins for us — and it is completely free.

Sarah LinFreelance Designer

Big quote mark

The details are not the details. They make the design.

Charles Eames

Minimal — italic, no border

Good design is as little design as possible.

Dieter Rams

Bordered — top & bottom rules

Content precedes design. Design in the absence of content is not design, it is decoration.

Jeffrey ZeldmanA List Apart

Content — linked source (author becomes a link)

When a source link is set, the author name becomes a link — hover it.

UnysonPlusDocumentation

Content — quote mark switched off

The same classic design with the decorative quote mark switched off.

Quote MarkHidden

Content — quote only (no author or role)

A bare quote with no author and no role — just the words.

The markup

Clean, lean code

This is the exact HTML the element outputs, straight from the page builder. No wrapper soup, no inline-style bloat.

<section class="fw-flexbox fw-flex fw-contained fw-collapse">
	<figure class="blockquote bq-599da533 fw-bq fw-bq--design-classic design-classic text-start fw-bq--mark">
		<blockquote class="fw-bq__quote"><span class="fw-bq__mark" aria-hidden="true">&ldquo;</span><p class="fw-bq__text">Design is not just what it looks like and feels like. Design is how it works.</p></blockquote>
		<figcaption class="fw-bq__cite"><span class="fw-bq__author">Steve Jobs</span><span class="fw-bq__role">Co-founder, Apple</span></figcaption>
	</figure>
</section>

To learn more about the Blockquote shortcode, please check out the online manual here.