View on GitHub

Pull quotes

Transform normal blockquotes into stylized pull quotes.

On this page

Examples

“They need to stop sleeping on me and get some understanding about this here game I spit!”
Mark Otto, Huge Nerd

html

<blockquote class="pull-quote">
  <img class="rounded-circle" src="/docs/assets/img/examples/avatar-mdo.png" alt="Mark Otto avatar">
  <p>
    “They need to stop sleeping on me and get some understanding about this here game I spit!”
  </p>
  <cite>Mark Otto, Huge Nerd</cite>
</blockquote>

CSS

Sass variables

$pull-quote-margin-top:          $spacer * 1.5;
$pull-quote-font-size:           $font-size-base * 1.5;
$pull-quote-font-size-xs:        $pull-quote-font-size * .8;

$pull-quote-img-width:           $spacer * 6.3;
$pull-quote-img-height:          $pull-quote-img-width;
$pull-quote-img-width-xs:        $pull-quote-img-width * .8;
$pull-quote-img-height-xs:       $pull-quote-img-width-xs;

$pull-quote-cite-font-size:      $pull-quote-font-size * .7;
$pull-quote-cite-font-size-xs:   $pull-quote-cite-font-size * .9;
$pull-quote-cite-color:          $gray-600;
$pull-quote-cite-text-transform: uppercase;