Guidance

The profile supplement content type is used for displaying current or former students or staff’s accounts of their experiences at the University.

They are used as a signpost to users to the full profile by pulling out a teaser from within the related content in the form of a quotation.

All profile supplements must have

  • A profile image - This should be a hi-resolution headshot of the student so their face is clearly visible on smaller screens. This will be displayed avatar-style.
  • Name - profile name and other information (eg subject area, course, job title, etc)
  • Quotation - used to highlight interesting and unique information from the profile.
  • Link - Link to the full student profile

Profile supplements may have

  • A ‘video’ category to indicate that the profile that is linked to contains a video.

When to use

Use at the end of pages to highlight profiles that are relevant to the current page content.

Developer guidance

If the linked to profile contains a video set the “video” boolean to true.

<section class="uol-profile-supplement{{ ' uol-profile-supplement--video' if video }}">
  <h2 class="uol-profile-supplement__title">{{ title }}</h2>
  <div class="uol-profile-supplement__body">
    <div class="uol-profile-supplement__image-container">
      {% if image %}
        <div class="uol-profile-image">
          <div class="uol-profile-image__img"
          role="img"
          style="background-image: url('{{ image.src | path }}');"
          aria-label="{{ image.alt }}"></div>
          {% if video %}
            <div class="uol-profile-supplement__video-icon uol-icon--icon-only uol-icon--icon-only--large uol-icon uol-icon--mdiPlay"></div>
          {% endif %}
        </div>
      {% endif %}
    </div>
    <div class="uol-profile-supplement__text-container">
      {% render '@uol-typography-blockquote', quote %}
      <a class="uol-profile-supplement__link" href="{{ link.url }}">{{ link.text }}</a>
    </div>
  </div>
</section>
<section class="uol-profile-supplement">
    <h2 class="uol-profile-supplement__title">Profile: Jefferson Sanchez</h2>
    <div class="uol-profile-supplement__body">
        <div class="uol-profile-supplement__image-container">

            <div class="uol-profile-image">
                <div class="uol-profile-image__img" role="img" style="background-image: url('../../placeholders/ph-profile-staff-02.jpg');" aria-label="Portrait of Jefferson Sanchez"></div>

            </div>

        </div>
        <div class="uol-profile-supplement__text-container">
            <blockquote class="uol-typography-blockquote">
                <p>I love thinking outside the box, so if you&apos;re enthusiastic and you really want to learn something new with cutting-edge technology, then Leeds is the place to be</p>

                <footer>
                    <cite>

                        Jefferson Sanchez, Research-based learning

                    </cite>
                </footer>

            </blockquote>

            <a class="uol-profile-supplement__link" href="/example">Find out more about Jefferson&amp;apos;s time at Leeds</a>
        </div>
    </div>
</section>
  • Content:
    .uol-profile-supplement {
      padding: $spacing-7 $spacing-4;
    
      @include media(">=uol-media-m") {
        padding: $spacing-8 $spacing-4;
      }
    
      @include media(">=uol-media-l") {
        padding: $spacing-9 $spacing-5;
        display: flex;
        flex-wrap: wrap;
      }
    
      .uol-article-container &,
      .uol-course-container & {
        margin: 0 0 $spacing-4;
        padding: 0;
      }
    
      footer {
        padding-top: $spacing-2;
    
        @include media(">=uol-media-m") {
          padding-top: $spacing-4;
        }
      }
    }
    
      .uol-profile-supplement__title {
        @extend .uol-typography-heading-2;
    
        position: relative;
        margin: $spacing-5 0 $spacing-6;
        overflow-wrap: break-word;
    
        @include media(">=uol-media-xl") {
          flex-basis: 100%;
        }
    
        &::before {
          content: "";
          position: absolute;
          display: inline-block;
          top: -#{$spacing-4};
          left: 0;
          width: $spacing-4;
          height: $spacing-2;
          background-color: $color-brand;
    
          @include media(">=uol-media-m") {
            width: $spacing-5;
          }
    
          @include media(">=uol-media-l") {
            width: $spacing-6;
            top: -#{$spacing-5};
          }
        }
      }
    
      .uol-profile-supplement__body {
        position: relative;
    
        @include media(">=uol-media-l") {
    
          display: flex;
    
          &::before {
            content: "";
            display: block;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            width: 6.5rem;
            background: $color-brand--dark;
            border-radius: 6px 0 0 6px;
          }
        }
      }
    
      .uol-profile-supplement__image-container {
        // background-color: rgba(hotpink, 0.5);
        box-sizing: border-box;
        position: relative;
        // Span 5 columns
        width: calc((100% + #{$spacing-4}) / 12 * 5 - #{$spacing-4});
        min-width: 150px;
        padding: $spacing-4 0 $spacing-4 $spacing-6;
    
        @include media(">=uol-media-m") {
          // Span 4 columns
          width: calc((100% + #{$spacing-4}) / 12 * 4 - #{$spacing-4});
        }
    
        @include media(">=uol-media-l") {
          width: initial;
          // Span 3 columns
          flex-basis: calc((100% + #{$spacing-5}) / 9 * 3 - #{$spacing-5});
          padding: $spacing-4 0 $spacing-4 $spacing-5;
        }
    
        @include media("<uol-media-l") {
    
          &::before {
            content: "";
            display: block;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            width: calc(50% - #{$spacing-4});
            background: $color-brand--dark;
            border-radius: 6px 0 0 6px;
            z-index: -1;
          }
        }
      }
    
      .uol-profile-supplement__video-icon {
        .js & {
          @extend %text-size-heading-2;
    
          position: absolute !important;
          right: 0;
          bottom: $spacing-1;
          width: 30%;
          background: $color-brand--bright;
          border: 3px solid $color-white;
          border-radius: 50%;
          color: $color-white;
          display: flex;
          align-items: center;
          justify-content: center;
          aspect-ratio: 1/1;
    
          @include media(">=uol-media-xs") {
            bottom: $spacing-2;
            width: 30%;
          }
    
          @include media(">=uol-media-s") {
            width: 25%;
          }
    
          @include media(">=uol-media-m") {
            bottom: $spacing-4;
          }
    
          @include media(">=uol-media-l") {
            bottom: 10%;
          }
    
          @include media(">=uol-media-xl") {
            width: 20%;
            bottom: $spacing-6;
          }
    
          svg {
            width: 80% !important;
            height: 80% !important;
            position: absolute;
          }
        }
      }
    
    
      .uol-typography-blockquote {
        padding: 0;
        margin-bottom: #{$spacing-6 + $spacing-1 + $spacing-2};
    
        @include media(">=uol-media-m") {
          margin-bottom: #{$spacing-7 + $spacing-1 + $spacing-2};
        }
    
        p {
          margin-bottom: $spacing-4;
        }
    
        &::before {
          top: -#{$spacing-5};
          left: -#{$spacing-5};
        }
      }
    
      .uol-profile-supplement__text-container {
        margin: $spacing-7 calc((100% + #{$spacing-4}) / 12) $spacing-6;
    
        @include media(">=uol-media-l") {
          margin: 0;
          box-sizing: border-box;
          padding: $spacing-6 0 $spacing-6 $spacing-6;
          flex-basis: calc((100% + #{$spacing-5}) / 9 * 6);
        }
      }
    
      .uol-profile-supplement__link {
        @extend %text-size-paragraph;
    
        display: block;
        font-weight: $font-weight-bold--sans-serif;
    
        text-decoration: none;
    
        &:hover,
        &:focus {
          text-decoration: underline;
        }
    
        &::before {
          content: "";
          display: block;
          position: relative;
          height: $spacing-1;
          top: -#{$spacing-4};
          background: $color-grey--light;
        }
    
        &::after {
          content: '';
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
        }
      }
    
  • URL: /components/raw/uol-supplement-profile/_profile-supplement.scss
  • Filesystem Path: src/library/02-components/profile-supplement/_profile-supplement.scss
  • Size: 4.7 KB
{
  "title": "Profile: Jefferson Sanchez",
  "image": {
    "src": "/placeholders/ph-profile-staff-02.jpg",
    "alt": "Portrait of Jefferson Sanchez"
  },
  "quote": {
    "content": "<p>I love thinking outside the box, so if you&apos;re enthusiastic and you really want to learn something new with cutting-edge technology, then Leeds is the place to be</p>",
    "cite": {
      "content": "Jefferson Sanchez, Research-based learning"
    }
  },
  "link": {
    "url": "/example",
    "text": "Find out more about Jefferson&apos;s time at Leeds"
  }
}