CSS Pull Quotes

A technique traditional to print is the pull quote, a snippet of the content that stands out from its surroundings to grab a reader’s attention as they scan pages.

 

Step 1: The HTML

For the pull quote basics, we can start with some HTML like the following:

<p>If ever there was ...[Big load of text]... humble pea is it.</p>

<p>Mother Nature has never created ...[Big load of text]... something so flawless.</p>

<blockquote class="pquote">
	<p>It is not an exaggeration to say that peas can be described as nothing less than
 perfect spheres of joy.</p>
</blockquote>

<p>The green seed ...[Big load of text]... favorite for good reason.</p>

<!-- ...and so on... -->

The pull quote obviously being a quote makes the blockquote element the perfect choice.

Step 2: Floating The Quote

Now we want to take this blockquote element, pull it out of the flow and style it to stand out from the rest of the content:

body {
	font: 80%/1.5 arial, helvetica, sans-serif;
}

.pquote {
	float: left;
	width: 8em;
	background: #ddf;
	font-weight: bold;
	padding: 1em;
	margin: 0 0.5em 0.5em 0;
}

Step 3: Adding Decoration

This is very simple CSS to give you an idea of how pull quotes can be easily achieved, 
but the sky is the limit – with a little more fiddling, something much more interesting can be achieved:

body {
	font: 80%/1.5 arial, helvetica, sans-serif;
}

.pquote {
	float: right;
	width: 8em;
	background: url(images/openquote.gif) top left no-repeat;
	color: #030;
	font-size: 2em;
	line-height: 0.9;
	font-style: italic;
	padding: 0.5em;
	margin: 0;
}

.quote p:first-letter {
	font-size: 1.5em;
	font-weight: bold;
}

A slightly more complex method would be to add more parts to the pull quote, such as a photograph or credit by using a bit more HTML:

<p>If ever there was ...[Big load of text]... humble pea is it.</p>

<p>Mother Nature has never created ...[Big load of text]... something so flawless.</p>

<div class="quotebox">
	<blockquote>
		<p>"It is my educated opinion that this is complete and utter tosh."</p>
	</blockquote>
	<p class="by">Patrick Griffiths</p>
</div>

<p>The green seed ...[Big load of text]... favorite for good reason.</p>

<!-- etc. -->

Slightly different CSS, essentially following the same principles as the first two examples can look like this:

body {
	font: 80%/1.5 arial, helvetica, sans-serif;
}

.quotebox {
	float: left;
	width: 200px;
	background: #900 url(images/ptg1.jpg) top no-repeat;
	color: #fc0;
	font-size: 0.9em;
	line-height: 1.2;
	padding-top: 71px;
	border: 2px solid #600;
	margin: 0 1em 1em 0;
}

.quotebox p {
	margin: 0;
}

.quotebox blockquote {
	line-height: 1.3;
	font-weight: bold;
	padding: 0.5em;
	border-top: 2px solid #600;
	margin: 0;
}

.quotebox .by {
	padding: 0.5em;
}

You may also like...