Staffordshire University Components

Quote Banner: Alternate Image Reverse

There are no notes for this item.

<div class="quote-banner  quote-banner--reverse  align-full">
    <div class="wrap">

        <div class="quote-banner__flexContainer">

            <div class="quote-banner__quoteContainer">
                <div class="card  card--testimonial  card--red">
                    <div class="card__content">
                        <blockquote class="blockquote--large">
                            <q class="blockquote__title">Since coming to Staffordshire Uni I’ve become much more creative and confident in myself and my abilities</q>

                            <footer class="blockquote__footer">
                                <cite class="cite">Dan Sheerman</cite>
                                <p>Vice President of naming complicated variants of things</p>
                            </footer>
                        </blockquote>
                    </div>
                </div>
            </div>

            <figure class="quote-banner__figure">
                <img src="https://placeimg.com/800/400/people" alt="person" />
            </figure>
        </div>

    </div>
</div>
 
<div class="quote-banner  quote-banner--reverse  align-full">
  <div class="wrap">

    <div class="quote-banner__flexContainer">

      <div class="quote-banner__quoteContainer">
        <div class="card  card--testimonial  card--red">
          <div class="card__content">
            <blockquote class="blockquote--large">
              <q class="blockquote__title">Since coming to Staffordshire Uni I’ve become much more creative and confident in myself and my abilities</q>

              <footer class="blockquote__footer">
                <cite class="cite">Dan Sheerman</cite>
                <p>Vice President of naming complicated variants of things</p>
              </footer>
            </blockquote>
          </div>
        </div>
      </div>

      <figure class="quote-banner__figure">
        <img src="https://placeimg.com/800/400/people" alt="person" />
      </figure>
    </div>

  </div>
</div>
  • Content: 
    .quote-banner {
  position: relative;
  overflow: hidden;
  background: linear-gradient( 45deg, rgba(white, 1) 35%,  rgba($greyblue--superlight, 1) 35% );

  //&:after {
  //  content: '';
  //  position: absolute;
  //  top: -15%;
  //  right: 40%;
  //  height: 200%;
  //  width: 200%;
  //  background: $greyblue-superlight;
  //  transform: rotate(45deg);
  //  transform-origin: center;
  //  z-index: -1;
  //}

  &__flexContainer {
    margin: 0 -#{$grid-gutter};
    min-height: 50vh;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-evenly;
  }

  &--reverse {
    .quote-banner__flexContainer {
      flex-direction: row-reverse;
    }
  }

  &__figure {
    margin: $spacing-xl $grid-gutter;
    flex: 1 1 40%;

    &--align-bottom {
      margin: 0 $grid-gutter;
      align-self: flex-end;
    }

    img {
      margin: auto;
      max-height: 75vh;
      width: auto;
    }
  }

  &__quoteContainer {
    margin: $spacing-xl $grid-gutter;
    flex: 1 1 20em;
  }
}
  • URL: /components/raw/quote-banner/_quote-banner.scss
  • Filesystem Path: src/components/quote-banner/_quote-banner.scss
  • Size: 1 KB