Component Library

Blockquote: Default 

<div class="iastate22-blockquote iastate22-blockquote--with-image">
    <div class="iastate22-blockquote__inner-wrap">
        <div class="iastate22-blockquote__portrait">
            <img src="../../img/featured-quote.jpg" alt="" loading="lazy" width="258" height="258">
        </div>
        <div class="iastate22-blockquote__text-wrap">
            <h2 class="iastate22-blockquote__quote">Lorem Ipsum Dolor Sit Amet duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur sit amet suis aut dolor.</h2>
            <p class="iastate22-blockquote__author">FirstName LastName , Role
            </p>
        </div>
    </div>
</div>
 
<div class="iastate22-blockquote{% if portrait %} iastate22-blockquote--with-image{% else %} iastate22-blockquote--with-no-image{% endif %}{% if not author %} iastate22-blockquote--no-author{% endif %}">
  <div class="iastate22-blockquote__inner-wrap">
    {% if portrait %}
      <div class="iastate22-blockquote__portrait">
        <img src="{{ portrait|path }}" alt="" loading="lazy" width="258" height="258">
        {% if video %}
        <button class="iastate22-blockquote__video-button" data-micromodal-trigger={{ video.modal.id }}>
          <svg xmlns="http://www.w3.org/2000/svg" width="30.873" height="18" viewBox="0 0 30.873 18">
            <path d="M-980.032,12916a2.129,2.129,0,0,1-1.968-2.249v-13.5a2.129,2.129,0,0,1,1.968-2.25h16.93a2.131,2.131,0,0,1,1.974,2.25v13.507A2.13,2.13,0,0,1-963.1,12916Zm27.316-2.1-6.412-2.162v-9.481l6.412-2.159a1.093,1.093,0,0,1,.451-.1,1.167,1.167,0,0,1,1.138,1.2v11.6a1.218,1.218,0,0,1-.541,1.021,1.1,1.1,0,0,1-.593.175A1.115,1.115,0,0,1-952.716,12913.9Z" transform="translate(982 -12898)" fill="#fff"/>
          </svg>
        </button>
        {% endif %}
      </div>
    {% endif %}
    <div class="iastate22-blockquote__text-wrap">
      <h2 class="iastate22-blockquote__quote">{{quote}}</h2>
      {% if author %}
        <p class="iastate22-blockquote__author">{{author}}
          {% if author_role %},
            {{author_role}}
          {% endif %}
        </p>
      {% endif %}
    </div>
  </div>
</div>
{% if video %}
  {% include "@modal--with-video" with video.modal %}
{% endif %}
 
{
  "quote": "Lorem Ipsum Dolor Sit Amet duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur sit amet suis aut dolor.",
  "author": "FirstName LastName",
  "author_role": "Role",
  "portrait": "../../img/featured-quote.jpg"
}
  • Content: 
    .paragraph-widget--blockquote {
  @extend %full-width-component;
  @include media-breakpoint-up(xl) {
    margin-top: rem(60);
    margin-bottom: rem(60);
    margin-right: rem(-298);
    position: relative;
  }
  &:before {
    @include media-breakpoint-up(xxl) {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      left: -50vw;
      width: 150vw;
      left: 50%;
      transform: translateX(-50%);
      z-index: -1;
      background-color: $iastate-red;
      pointer-events: none;
    }
  }
}

.iastate22-blockquote {
  background-color: $iastate-red;
  @extend %outer-pad-x;
  padding: rem(140) rem(36) rem(100);
  position: relative;
  @include media-breakpoint-up(md) {
    padding-left: rem(70);
    padding-right: rem(70);
  }
  @include media-breakpoint-up(xl) {
    padding: rem(60) rem(36) rem(90);
  }
  &.iastate22-blockquote--no-author {
    padding-bottom: rem(140);
    @include media-breakpoint-up(xl) {
      padding-bottom: rem(125);
    }
  }
}

.iastate22-blockquote__inner-wrap {
  @include media-breakpoint-up(xl) {
    display: flex;
    align-items: flex-start;
    width: 90%;
    margin: 0 auto;
  }
  @include media-breakpoint-up(xxl) {
    position: relative;
    width: 80%;
    left: rem(-60);
  }
  .iastate22-blockquote--with-no-image & {
    @include media-breakpoint-up(xl) {
      padding-left: rem(258);
    }
  }
}

.iastate22-blockquote__portrait {
  @extend %responsive-img;
  max-width: rem(332);
  margin: rem(-80) auto rem(28);
  @include media-breakpoint-up(md) {
    max-width: rem(332);
  }
  @include media-breakpoint-up(xl) {
    flex: 0 0 auto;
    margin: 0;
    max-width: rem(258);
    width: rem(258);
    left: rem(-12);
  }

  &:before {
    padding-top: 100%;
  }
  img {
    border-radius: 50%;
  }
}

.iastate22-blockquote__text-wrap {
  position: relative;
  @include media-breakpoint-up(xl) {
    padding-left: rem(50);
  }
}
.iastate22-blockquote__quote {
  color: $white;
  padding: 0;
  margin: 0;
  position: relative;
  @include media-breakpoint-up(md) {
    font-size: rem(40);
    line-height: (58 / 40);
  }
  &:before,
  &:after {
    content: "";
    position: absolute;
    width: rem(64);
    height: rem(52);
    background-repeat: no-repeat no-repeat;
    background-position: center center;
    background-size: rem(64) rem(52);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='63.979' height='52'%3E%3Cg data-name='Group 416' fill='%23f1be48'%3E%3Cpath data-name='“' d='M27.043 52.001v-25h-16c-.4-10 4.8-15.8 16-17.8v-9.2c-17.6 1.4-27.8 12.8-27 30.2v21.8ZM63.979 52.001v-25h-16c-.4-10 4.8-15.8 16-17.8v-9.2c-17.6 1.4-27.8 12.8-27 30.2v21.8Z'/%3E%3C/g%3E%3C/svg%3E");
    z-index: 1;
  }
  &:before {
    top: rem(-330);
    @include media-breakpoint-up(xl) {
      top: rem(-9);
      margin-left: rem(-115);
    }
    .iastate22-blockquote--with-no-image & {
      top: rem(-80);
      @include media-breakpoint-up(xl) {
        top: rem(-9);
      }
    }
  }
  &:after {
    transform: rotate(180deg);
    bottom: rem(-81);
    right: 0;
  }
}
.iastate22-blockquote__author {
  color: $white;
  font-family: $typeface-sans-serif;
  font-weight: 700;
  margin-top: rem(20);
  padding-right: rem(75);
  @include media-breakpoint-up(xl) {
    margin-top: rem(2);
  }
}

.iastate22-blockquote__video-button {
  position: absolute;
  bottom: 0;
  right: 0;
  width: rem(64);
  height: rem(64);
  background-color: $iastate-red;
  border: solid rem(2) $white;
  border-radius: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transform: translate(2%, -14%);
  transition: background-color 0.3s ease-out;

  @include media-breakpoint-up(xl) {
    transform: translate(15%, 10%);
  }

  svg path {
    transition: fill 0.3s ease-out;
  }

  &:hover,
  &:focus-visible {
    background-color: $white;
    transition: background-color 0.2s ease-out;

    svg path {
      transition: fill 0.2s ease-out;
      fill: $iastate-maroon;
    }
  }

  &:before {
    content: "";
    position: absolute;
    bottom: rem(-10);
    right: rem(-1);
    width: rem(332);
    height: rem(332);

    @include media-breakpoint-up(xl) {
      bottom: rem(2);
      right: rem(8);
      width: rem(258);
      height: rem(258);
    }
  }
}
  • URL: /components/raw/blockquote/_blockquote.scss
  • Filesystem Path: src/components/blockquote/_blockquote.scss
  • Size: 4.3 KB

Blockquote

This is a custom component (the class has been prefaced with .iastate22-[classname]).

  • In addition to the quote text, it supports an optional image and optional author fields, as well as the optional role field attached to the author if needed.
  • The custom styles are imported into the index.scss file as @import "../components/blockquote/blockquote";
  • There is a paragraph-widget wrapper for use in page context <div class="paragraph-widget paragraph-widget--blockquote">.