University of Leeds Design System v1.0.15

Profile Supplement

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.

<aside 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>
</aside>
 
<aside 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>
</aside>
  • Content: 
    .uol-profile-supplement {
  padding: $spacing-7 $spacing-4 $spacing-8;

  @include media(">=uol-media-m") {
    padding: $spacing-8 $spacing-4  $spacing-9;
  }

  @include media(">=uol-media-l") {
    padding: $spacing-9 $spacing-5 96px;
    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") {
      width: 100%;

      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;
      width: 35% !important;
      // min-width: 197px;
      // 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) 0;

    @include media(">=uol-media-l") {
      width: 65% !important;
      margin: 0;
      box-sizing: border-box;
      padding: $spacing-6 0 $spacing-6 $spacing-6;
      flex-basis: calc((100% + #{$spacing-5}) / 9 * 6);
    }

    @include media(">=uol-media-xl") {
      min-height: 388px;
    }
  }

  .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.9 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"
  }
}