University of Leeds Design System v1.0.17

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.

Image guidance

4:5 (344 x 430px across the viewpoints)

<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-portrait-2.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;

    margin-bottom: 2.6875rem; // required 48, quote has -5px top margin so set this to 43

    @include media('>=uol-media-m') {
      margin-bottom: 3.6875rem; // required 64, quote has -5px top margin so set this to 59
    }

    @include media('>=uol-media-l') {
      margin-bottom: 6rem;
    }
     
    // For decorative bar on smaller views
    &::after {
      content: '';
      z-index: -1;
      position: absolute;
      top: 19.75rem; //316px
      left: 0;
      width: 96%;
      height: 2.8125rem; //45px
      background: #FFF0E2;
    }

    @include media('>uol-media-l') {
      &::after {
        display: none;
      }
    }
  
       @include media('>=uol-media-l') {
        display: flex;
        background: linear-gradient(to top,#00D0A0 80%, #fff 6%);
        padding-left: 4rem;
       }
  
       .uol-typography-blockquote {
        @extend %uol-font-sans-serif;
        font-style: normal;
        font-weight: 600;
        line-height: 1.75rem; //28px
        font-size: 1.25rem!important; //20px
  
        margin-right: $spacing-5;
        margin-bottom: 3.25rem; //52px
  
        max-width: 470px;

        @include media('>=uol-media-m') { 
          max-width: 38.125rem //610px
        }

        @include media('>=uol-media-l') {
          max-width: 49rem; //784px
          margin-right: $spacing-6;
          margin-left: $spacing-5;
        }

        @include media('>=uol-media-m', '<uol-media-l') {
          margin-bottom: 1.75rem; //28px
        }
  
        &::before {
          color: $color-black;
          left: -0.625rem; //-10px
        }
  
        cite {
          display: block;
          color: $color-black;
          font-style: normal;
          margin-top: 1rem;
        }
  
       }
  
      &__img {
        width:  17.5rem; //280px
        max-width: 100%;
        z-index: 2;

        @include media('>=uol-media-l') {
          width: 21.5rem; //344px
        }
      }
  
      &__text-container {
        display: flex;
        position: relative;
        top: -0.3125rem; //-5px
        align-items: center;
        background: #00D0A0;
        padding: calc(2rem + 10px) 2rem 2rem calc(2rem + 10px);
  
        @include media('>=uol-media-l') {
          width: calc(100% - 2 * 2rem);
          background: transparent;
          padding-top: 0;
  
          .uol-typography-blockquote {
            top: 5rem; //80px
          }
  
          // For decorative bar on larger views
          &::before {
            content: '';
            z-index: -1;
            position: absolute;
            top: 3.6875rem; //59px
            left: 0;
            width: 96%;
            height: 2rem; //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: 2.8 KB 
{
  "image": {
    "src": "/placeholders/new-homepage/student-portrait-2.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"
    }
  }
}