Pull Quote

By Rafi

How do I use This?

A pull quote style for calling out a piece of text in an article.

HTML

<div class="row column medium-9 large-7">
  <p>Well, dreams, they feel real while we're in them right? Its only when we wake up then we realize that something was actually strange. If we are gonna perform Inception then we need imagination. <q class="pull-quote">"You musn't be afraid to dream a little bigger darling."</q> No creeping doubts? Not feeling persecuted, Dom? Chased around the globe by anonymous corporations and police forces, the way the projections persecute the dreamer? Admit it: you don't believe in one reality anymore. So choose. Choose to be here. Choose me. Great. Thank you. So, now we're trapped in Fischer's mind battling his own private army, and if we get killed, we'll be lost in limbo till our brains turn to scrambled egg. To wake up from that after, after years, after decades... after we'd become old souls thrown back into youth like that... I knew something was wrong with her. She just wouldn't admit it. Eventually, she told me the truth. She was possessed by an idea, this one, very simple idea, that changed everything. That our world wasn't real. That she needed to wake up to come back to reality, that, in order to get back home, we had to kill ourselves.</p>
</div>

$pull-quote-maxwidth: 50%;
$pull-quote-color: $primary-color;
$pull-quote-offset-large: -25%;
$pull-quote-offset-medium: -15%;
$pull-quote-fontsize-medium-up: 1.875rem;
$pull-quote-fontsize-small: 1.125rem;
$pull-quote-gradient: true;

.pull-quote {
  font-weight: 400;
  letter-spacing: 1.5px;
  font-style: normal;
  font-size: $pull-quote-fontsize-small;
  max-width: $pull-quote-maxwidth;
  line-height: 1.25em;
  text-transform: uppercase;
  color: $pull-quote-color;
  float: right;
  margin: 10px 0 0 20px;
  @if $pull-quote-gradient == true {
    background: linear-gradient($secondary-color, $pull-quote-color);
  } @else if $pull-quote-gradient == false {
    background: $pull-quote-color; // sets text color
  }
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  &:before {
    content: '';
  }

  &:after {
    content: '';
  }

  @include breakpoint(medium) {
    font-size: $pull-quote-fontsize-medium-up;
    max-width: calc(#{$pull-quote-maxwidth} - 5%);
    margin-right: $pull-quote-offset-medium;
  }

  @include breakpoint(large) {
    max-width: calc(#{$pull-quote-maxwidth} + 5%);
    margin-right: $pull-quote-offset-large;
  }
}

.pull-quote {
  font-weight: 400;
  letter-spacing: 1.5px;
  font-style: normal;
  font-size: 1.125rem;
  max-width: 50%;
  line-height: 1.25em;
  text-transform: uppercase;
  color: #1779ba;
  float: right;
  margin: 10px 0 0 20px;
  background: linear-gradient(#767676, #1779ba);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.pull-quote:before {
  content: '';
}

.pull-quote:after {
  content: '';
}

@media print, screen and (min-width: 40em) {
  .pull-quote {
    font-size: 1.875rem;
    max-width: calc(50% - 5%);
    margin-right: -15%;
  }
}

@media print, screen and (min-width: 64em) {
  .pull-quote {
    max-width: calc(50% + 5%);
    margin-right: -25%;
  }
}

Pull Quote

By Rafi

Sidelines Text Divider

Flexible Article with Responsive Images

Polls

Pull Quote

By Rafi

Similar Building Blocks

Sidelines Text Divider

Flexible Article with Responsive Images

Polls