Blockquote Styles

By Harry Manchanda

F6
#
article news blog blockquote testimonial quote typeography
How do I use This?

Blockquote with variations for full width, left and right aligned within the body of text.

HTML
<!-- In this container, add blockquote-left or blockquote-right to make the blockquote left / -->
<div class="blockquote-container">
  <div class="callout">
    <h4 class="blockquote-title">This is a Flexible Blockquote</h4>
    <blockquote>
      <p class="blockquote-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque repudiandae mollitia veniam obcaecati vitae eaque ullam, nostrum quos autem, laudantium cupiditate repellendus animi voluptas, aperiam distinctio at. Commodi, dolores, fugiat. Bacon ipsum dolor sit amet salami rump bacon, flank meatloaf pork belly spare ribs jerky. Corned beef sirloin short ribs ribeye salami, bacon flank shankle leberkas andouille tri-tip pork chop frankfurter.Chicken brisket cow, pork belly pork loin frankfurter ground round bacon.</p>
    </blockquote>
  </div>
</div>


.blockquote-container {
  &.blockquote-left {
    float: left;
    width: 35%;
    margin-right: $global-margin;

    @include breakpoint (small only) {
      float: none;
      margin: 0;
      width: 100%;
    }
  }

  &.blockquote-right {
    float: right;
    width: 35%;
    margin-left: $global-margin;
  }

  .callout {
    .blockquote-title {
      margin-left: 1rem;
    }

    blockquote {
      quotes: "“""”""‘""’  ";
      border-left: none;

      &:before {
        content: open-quote;
        color: $dark-gray;
        font-size: 4em;
        line-height: 0.1em;
        vertical-align: -0.4em;
      }

      &:after {
        content: close-quote;
        color: $dark-gray;
        font-size: 4em;
        line-height: 0.1em;
        vertical-align: -0.6em;
      }

      .blockquote-content {
        display: inline;
        color: $black;
      }
    }
  }
}


@charset "UTF-8";

.blockquote-container.blockquote-left {
  float: left;
  width: 35%;
  margin-right: 1rem;
}

@media screen and (max-width: 39.9375em) {
  .blockquote-container.blockquote-left {
    float: none;
    margin: 0;
    width: 100%;
  }
}

.blockquote-container.blockquote-right {
  float: right;
  width: 35%;
  margin-left: 1rem;
}

.blockquote-container .callout .blockquote-title {
  margin-left: 1rem;
}

.blockquote-container .callout blockquote {
  quotes: "“" "”" "‘" "’  ";
  border-left: none;
}

.blockquote-container .callout blockquote:before {
  content: open-quote;
  color: #8a8a8a;
  font-size: 4em;
  line-height: 0.1em;
  vertical-align: -0.4em;
}

.blockquote-container .callout blockquote:after {
  content: close-quote;
  color: #8a8a8a;
  font-size: 4em;
  line-height: 0.1em;
  vertical-align: -0.6em;
}

.blockquote-container .callout blockquote .blockquote-content {
  display: inline;
  color: #0a0a0a;
}
JS

Similar Building Blocks

media

Pull Quote

F6
by Rafi
media

Simple Article Header

F6
by Harry Manchanda
media

Sidelines Text Divider

F6
by Rafi