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>
	<div class="fw-container">
		<div class="fw-row">
			<div class="fw-col-12">
				<figure class="blockquote bq-4eda3e18 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>
			</div>
		</div>
	</div>
</section>

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

Free & open source

Build with this element, free.

Install the framework and the Bootstrap 5 theme, then drag this element into any page.

Get the framework free