Fancy CSS3 Pull-Quotes Pull-quotes are different from blockquotes in that they appear off to the side of your blog or news article. These often reference quoted text from the article, and so they appear slightly different than blockquotes. This default class has some basic properties along with 3 unique font families to choose from.

Fancy CSS3 Pull-Quotes

.has-pullquote:before {
  /* Reset metrics. */
	padding: 0;
	border: none;
	
	/* Content */
	content: attr(data-pullquote);
	
	/* Pull out to the right, modular scale based margins. */
	float: right;
	width: 320px;
	margin: 12px -140px 24px 36px;
	
	/* Baseline correction */
	position: relative;
	top: 5px;
	
	/* Typography (30px line-height equals 25% incremental leading) */
	font-size: 23px;
	line-height: 30px;
}

.pullquote-adelle:before {
	font-family: "adelle-1", "adelle-2";
	font-weight: 100;
	top: 10px !important;
}

.pullquote-helvetica:before {
	font-family: "Helvetica Neue", Arial, sans-serif;
	font-weight: bold;
	top: 7px !important;
}

.pullquote-facit:before {
	font-family: "facitweb-1", "facitweb-2", Helvetica, Arial, sans-serif;
	font-weight: bold;
	top: 7px !important;
}