University of Leeds Design System v1.0.16

Image Quote

Guidance

The image quote is used to display current or former students or staff’s accounts of their experiences at the University. Currently purposely built and used only for the web improvements project.

Character count (TBC)

Max character count needed. The position of image and text container are fixed. The text will align center vertically. However if character count is ignored text will overspill the container.

<section class="image-quote">
  <img class="image-quote__img" src="{{ image.src }}" alt="{{ image.alt }}" >
   <div class="image-quote__text-container">
      {% render '@uol-typography-blockquote', quote %}
    </div>
</section>
 
<section class="image-quote">
    <img class="image-quote__img" src="/placeholders/new-homepage/student-potrait.png" alt="Portrait of Jefferson Sanchez">
    <div class="image-quote__text-container">
        <blockquote class="uol-typography-blockquote">
            This whole experience has taught me to put myself out there, and do what makes me uncomfortable. If I had been too afraid to move out come to Leeds, I would not be where I am now, with the fantastic memories and people I have surrounding me.

            <footer>
                <cite>

                    Name, course

                </cite>
            </footer>

        </blockquote>

    </div>
</section>
  • Content: 
    .image-quote {
  position: relative;

   @include media('<uol-media-l') {
    &::after {
      content: '';
      z-index: -1;
      position: absolute;
      top: calc(430px - 32px);
      left: 0;
      width: 90%;
      height: 32px;
      background: #FFF0E2;
    }
  }

     @include media('>=uol-media-l') {
      display: flex;
      background: linear-gradient(to top,#00D0A0 80%, #fff 6%);
      padding-left: 2rem;
     }

    &__img {
      width: 344px;
      height: 430px;
      z-index: 2;
    }

    &__text-container {
      display: flex;
      position: relative;
      top: -2px;
      align-items: center;
      background: #00D0A0;
      height: 382px;
      width: calc(100% - 2 * 2rem);
      padding: 2rem;

      @include media('>=uol-media-m') {
        top: -4px;
      }

      @include media('>=uol-media-l') {
        background: transparent;
        padding: 0 2rem;

        .uol-typography-blockquote {
          // @extend .uol-typography-heading-5;
          top: 80px;
        }

      &::before {
        content: '';
        z-index: -1;
        position: absolute;
        top: 56px;
        left: 0;
        width: 90%;
        height: 32px;
        background: #FFF0E2;
        z-index: 1;
    }
      }
    }
}
  • URL: /components/raw/uol-image-quote/_image-quote.scss
  • Filesystem Path: src/library/02-components/image-quote/_image-quote.scss
  • Size: 1.3 KB 
{
  "image": {
    "src": "/placeholders/new-homepage/student-potrait.png",
    "alt": "Portrait of Jefferson Sanchez"
  },
  "quote": {
    "content": "This whole experience has taught me to put myself out there, and do what makes me uncomfortable. If I had been too afraid to move out come to Leeds, I would not be where I am now, with the fantastic memories and people I have surrounding me. ",
    "cite": {
      "content": "Name, course"
    }
  }
}