University of Leeds Design System v1.0.18

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)

Quote: A hard limit of 245 characters (including spaces)

Citation: A hard limit of 110 characters (including spaces)

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;

    @include media('>=uol-media-m') {
      margin-bottom: 3.6875rem;
    }

    @include media('>=uol-media-l') {
      margin-bottom: 6rem;
    }

    // For decorative bar on smaller views
    &::after {
      content: '';
      z-index: -1;
      position: absolute;
      top: 19.75rem;
      left: 0;
      width: 96%;
      height: 2.8125rem;
      background: $color-cream
    }

    @include media('>uol-media-l') {
      &::after {
        display: none;
      }
    }

       @include media('>=uol-media-l') {
        display: flex;
        background: linear-gradient(to top,$color-brand-teal 80%, #fff 6%);
        padding-left: 4rem;
       }

       .uol-typography-blockquote {
        @extend %uol-font-sans-serif;

        font-style: normal;
        font-weight: 600;
        line-height: 1.75rem;
        font-size: 1.25rem !important;
        margin-right: $spacing-5;
        margin-bottom: 3.25rem;
        max-width: 470px;

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

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

        @include media('>=uol-media-m', '<uol-media-l') {
          margin-bottom: 1.75rem;
        }

        &::before {
          color: $color-black;
          left: -0.625rem;
        }

        cite {
          display: block;
          color: $color-black;
          font-style: normal;
          margin-top: 1rem;
        }

       }

      &__img {
        width:  17.5rem;
        max-width: 100%;
        z-index: 2;

        @include media('>=uol-media-l') {
          width: 21.5rem;
        }
      }

      &__text-container {
        display: flex;
        position: relative;
        top: -0.3125rem;
        align-items: center;
        background: $color-brand-teal;
        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;
          }

          // For decorative bar on larger views
          &::before {
            content: '';
            z-index: -1;
            position: absolute;
            top: 3.6875rem;
            left: 0;
            width: 96%;
            height: 2rem;
            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.6 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"
    }
  }
}