Inline Quote

By Rafi

F6
#
How do I use This?

A great way to display a quote or testimonial in context of an article section.

HTML
<div class="quote-inline-wrap-article-content">

  <div class="quote-inline-wrap">
    <div class="quote-inline-marks"></div>
    <div class="quote-inline-testimonial">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ultrices, elit sed faucibus pharetra, diam mauris bibendum orci, sit amet ullamcorper purus dui sit amet augue. Donec aliquet diam ut neque mattis, eu tristique sem rutrum.</p>
    </div>
    <div class="quote-inline-person">
      <div class="quote-inline-photo">
        <img src="https://placehold.it/70" class="" height="" width="" alt="">
      </div>
      <p>John Doe</p>
      <p>Important person, some Company</p>
    </div>
  </div>

  <p>Flank spare ribs capicola, strip steak biltong pancetta bresaola tri-tip cow landjaeger. Short ribs sirloin beef ribs, flank capicola ribeye turducken. Sirloin boudin andouille tail. Ham flank tail sausage t-bone, jerky landjaeger kevin porchetta ground round pork belly.</p>

  <p>Pork loin doner biltong shoulder meatball flank. Sirloin shankle ground round tail, short loin prosciutto beef ribs salami pork pancetta kielbasa. Brisket spare ribs jerky filet mignon flank. Turducken ham sausage pork loin salami. Ball tip meatloaf shank pancetta hamburger meatball. Jowl beef pork loin tenderloin turducken, pastrami capicola filet mignon ham hock pork belly t-bone jerky ball tip kevin.</p>

  <p>Filet mignon shank pastrami pork loin ham jerky corned beef chuck drumstick ribeye prosciutto pork belly tail. Beef leberkas brisket ham hock tenderloin tail tri-tip pork chop. Corned beef boudin andouille tail fatback chicken strip steak biltong pancetta pork loin tri-tip landjaeger pastrami kevin. Tongue spare ribs kevin ribeye shoulder swine.</p>

  <p>Chicken kielbasa swine ham hock filet mignon strip steak bacon fatback pork t-bone. Ground round shankle tongue, jowl flank spare ribs beef leberkas ham boudin shank capicola short ribs. Drumstick pork loin turkey pork chop salami andouille pork belly. Short loin tongue tri-tip, hamburger filet mignon pastrami doner shoulder turkey ball tip t-bone jerky ham chicken.</p>

  <p>Ground round flank pork loin salami, cow biltong hamburger swine brisket tongue tenderloin drumstick meatball. Biltong tongue salami ham shankle, leberkas meatloaf sirloin ball tip. Pork loin pastrami spare ribs beef capicola sausage kevin filet mignon pork chop. Bacon jerky turkey shoulder cow capicola ball tip shank. Ham tongue tail tri-tip kielbasa ham hock frankfurter meatball cow brisket. Shankle sausage filet mignon biltong pork loin. Short ribs spare ribs chuck pig meatloaf shoulder cow tail brisket biltong ball tip ham hock.</p>

  <p>Biltong salami rump drumstick pork belly bacon frankfurter pork chop pork meatloaf cow. Shankle chuck venison landjaeger jerky sirloin. Chicken kevin strip steak, turkey sausage brisket meatloaf prosciutto frankfurter fatback pancetta pork boudin. Landjaeger pastrami biltong short loin tongue filet mignon leberkas pig. Biltong tenderloin ground round, short ribs hamburger ribeye strip steak ham corned beef porchetta.</p>
</div>

$quote-inline-width: rem-calc(350);

.quote-inline-wrap-article-content {
  max-width: 100%;
  position: relative;
}

.quote-inline-wrap {
  float: left;
  max-width: $quote-inline-width;
  padding: 0 1rem 1rem 0;

  .quote-inline-marks {
    font-size: rem-calc(100);
    color: $dark-gray;
    line-height: 1rem;
  }

  .quote-inline-testimonial {
    border-radius: 5px;

    p {
      font-weight: 300;
    }
  }

  .quote-inline-person {
    margin-bottom: 1.5rem;

    .quote-inline-photo img {
      border-radius: 50%;
      width: rem-calc(70);
      height: rem-calc(70);
      float: left;
      margin-right: 1rem;
    }

    p {
      position: relative;
      top: 5px;

      &:nth-child(2) {
        font-size: 1rem;
        font-weight: 500;
        margin-bottom: 0;
      }

      &:nth-child(3) {
        font-size: 0.875rem;
        font-weight: 400;
        color: $dark-gray;
      }
    }
  }

  @include breakpoint(medium down) {
    width: 100%;
    float: none;
    display: block;
  }
}


.quote-inline-wrap-article-content {
  max-width: 100%;
  position: relative;
}

.quote-inline-wrap {
  float: left;
  max-width: 21.875rem;
  padding: 0 1rem 1rem 0;
}

.quote-inline-wrap .quote-inline-marks {
  font-size: 6.25rem;
  color: #8a8a8a;
  line-height: 1rem;
}

.quote-inline-wrap .quote-inline-testimonial {
  border-radius: 5px;
}

.quote-inline-wrap .quote-inline-testimonial p {
  font-weight: 300;
}

.quote-inline-wrap .quote-inline-person {
  margin-bottom: 1.5rem;
}

.quote-inline-wrap .quote-inline-person .quote-inline-photo img {
  border-radius: 50%;
  width: 4.375rem;
  height: 4.375rem;
  float: left;
  margin-right: 1rem;
}

.quote-inline-wrap .quote-inline-person p {
  position: relative;
  top: 5px;
}

.quote-inline-wrap .quote-inline-person p:nth-child(2) {
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: 0;
}

.quote-inline-wrap .quote-inline-person p:nth-child(3) {
  font-size: 0.875rem;
  font-weight: 400;
  color: #8a8a8a;
}

@media screen and (max-width: 63.9375em) {
  .quote-inline-wrap {
    width: 100%;
    float: none;
    display: block;
  }
}

JS