University of Leeds Design System v1.0.15

Accreditation Logos

Guidance

This component is used to display linked logos in situations where the site owners want to evidence accreditations or display sponsorships or partnerships.

Each item should include a title (used to generate link text), a link and a logo. The logo should ideally be a monochrome or black and white SVG. While other image formats can be used they may appear pixelated or blurred.

This component is used within @uol-widget-accreditation-logos and @uol-site-footer only and should not be used elsewhere.

When to use

  • When you need to evidence accreditations, partnerships or sponsorships.

When not to use

  • Do not use as an image gallery. There is a @uol-gallery pattern instead.

Image Guidance

To avoid scaling, ideally the logos should be SVG files or PNG files with a transparent background. Depending on their use (widget or footer), the following guidance should be applied.

When used within the widget (@uol-widget-accreditation-logos), the logos appear on a white background and consideration must be given to this when determining which logos to use, specifically ensuring a transparent or white background. When permitted use a grayscale logo on white/transparent background.

When used within the footer (@uol-site-footer), the logos appear on a dark background and consideration must be given to this when determining which logos to use, specifically ensuring a transparent background. For single colour logos the footer logo colour should be white.

<div class="uol-accreditations">
  {% for accreditation in accreditations.items %}
    <div class="uol-accreditation">
      <a class="uol-accreditation__link" href="{{ accreditation.url }}">
        <img class="uol-accreditation__logo" src="{{ accreditation.image.src }}" alt="{{ accreditation.title }} home page" >
      </a>
    </div>
  {% endfor %}
</div>
 
<div class="uol-accreditations">

    <div class="uol-accreditation">
        <a class="uol-accreditation__link" href="/link-1">
            <img class="uol-accreditation__logo" src="/placeholders/ph-accreditation-04.svg" alt="Association of MBAs home page">
        </a>
    </div>

    <div class="uol-accreditation">
        <a class="uol-accreditation__link" href="/link-2">
            <img class="uol-accreditation__logo" src="/placeholders/ph-accreditation-05.svg" alt="EFMD home page">
        </a>
    </div>

    <div class="uol-accreditation">
        <a class="uol-accreditation__link" href="/link-3">
            <img class="uol-accreditation__logo" src="/placeholders/ph-accreditation-06.svg" alt="AACSB home page">
        </a>
    </div>

    <div class="uol-accreditation">
        <a class="uol-accreditation__link" href="/link-4">
            <img class="uol-accreditation__logo" src="/placeholders/ph-accreditation-07.svg" alt="University of Leeds home page">
        </a>
    </div>

</div>
  • Content: 
    $accreditation-border-width: 2px;

.uol-accreditations {
  box-sizing: border-box;

  @media screen and (forced-colors: active) {
    background-color: #838383;
    forced-color-adjust: none;
  }

  .uol-widget__content & {

    @include media(">=uol-media-m") {
      margin: 0 -#{$spacing-2};
      display: flex;
      flex-wrap: wrap;
    }

    @include media(">=uol-media-l") {
      margin: 0 -#{$spacing-3};
    }

    @include media(">=uol-media-xl") {
      margin: 0 -#{$spacing-4};
    }
  }

  .uol-site-footer & {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 18rem;

    @include media(">=uol-media-s", "<uol-media-m") {
      width: 16.5rem;
    }

    @include media(">=uol-media-m") {
      width: 19rem;
    }

    @include media(">=uol-media-l") {
      width: 49.5rem;
      justify-content: flex-start;
    }

    @include media(">=uol-media-xl") {
      margin-top: $spacing-2;
    }

    @media screen and (-ms-high-contrast: active) {
      -ms-high-contrast-adjust: none;

      // TODO: IE11 hack
      .no-csspositionsticky & {
        background-color: #838383;
      }
    }
  }
}

  .uol-accreditation {
    box-sizing: border-box;

    @include media(">=uol-media-m") {
      width: 50%;
      padding: 0 $spacing-2;
    }

    @include media(">=uol-media-l") {
      padding: 0 $spacing-3;
    }

    @include media(">=uol-media-xl") {
      width: 25%;
      padding: 0 $spacing-4;
    }

    .uol-widget__content & {

      @include media(">=uol-media-m") {

        // when stacked in two columns, nudge up 3rd + onwards logos to avoid duplicate border
        &:nth-child(n+3) {
          margin-top: -#{$accreditation-border-width};
        }
      }

      @include media(">=uol-media-xl") {

        // when in four columns remove negative margin for items 3 and 4
        &:nth-child(n+3) {
          margin-top: 0;
        }

        // add negative margin for 5th onwards items (2nd row and beyond)
        &:nth-child(n+5) {
          margin-top: -#{$accreditation-border-width};
        }
      }

      .uol-side-nav-container--populated + .uol-homepage-content & {

        @include media(">=uol-media-xl") {
          width: calc(100% / 3);

          &:nth-child(n+4) {
            margin-top: -#{$accreditation-border-width};
          }
        }
      }
    }

    .uol-site-footer & {
      height: 4.25rem;
      padding: 0;
      width: 8rem;

      @include media(">=uol-media-s", "<uol-media-m") {
        width: 7.125rem;
      }

      @include media(">=uol-media-l") {
        width: fit-content;
        margin-right: $spacing-6;
      }

      &:nth-child(-n+2) {
        margin-bottom: $spacing-5;

        @include media(">=uol-media-l") {
          margin-bottom: 0;
        }
      }

      &:nth-child(n+5) {
        margin-top: $spacing-5;

        @include media(">=uol-media-l") {
          margin-bottom: 0;
        }
      }
    }
  }

    .uol-accreditation__link {
      display: block;
      text-align: center;
      padding: $spacing-5 $spacing-7;

      .uol-widget__content & {
        display: flex;
        padding: $spacing-5 $spacing-7;
        min-height: 60px;
        justify-content: center;
        align-items: center;

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

        // all widget items have top border
        border-top: $accreditation-border-width solid $color-brand;

        @include media(">=uol-media-m") {
          // when NOT small (ie more than one column) items have a bottom border
          border-bottom: $accreditation-border-width solid $color-brand;
        }

        @include media(">=uol-media-l") {
          padding: $spacing-5 0;
        }

        &:focus {
          background-color: $color-brand--faded;
          outline: none;
        }

      }

      // if in widget and small and last item, have a bottom border
      .uol-widget__content .uol-accreditation:last-of-type & {
        border-bottom: $accreditation-border-width solid $color-brand;
      }

      .uol-site-footer & {
        display: inline-block;
        height: 4.25rem;
        padding: 0;

        &:focus {
          outline: 1px dotted $color-brand--bright;
          outline-offset: 1px;
          transition: outline 0.66s ease-in;
        }
      }
    }

    .uol-accreditation__logo {
      max-width: 100%;

      // TODO: IE11 hack
      .no-csspositionsticky & {
        height: auto;
        height: 100%;
        width: 100%;

        @include media(">=uol-media-s") {
          width: auto;
          height: auto;
        }
      }

      .uol-widget__content & {
        // Image scaled on hover - set non-hover size to be less than 1 to avoid distortion when scaled to 100%
        transform: scale3d(0.92, 0.92, 0.92);
        transition: transform 0.2s ease;
        max-height: 60px;
        vertical-align: middle;

        @include media(">=uol-media-m") {
          max-height: 80px;
        }

        &:hover,
        .uol-accreditation__link:focus & {
          transform: scale3d(1, 1, 1);
        }
      }

      .uol-site-footer & {
        vertical-align: middle;
        object-fit: contain;
        transform: translate(0, -50%);
        max-width: 8rem;
        margin: 1.5rem 0;
        height: 4.25rem;
        max-width: 8rem;

        @include media(">=uol-media-m") {
          height: 4.675rem;
          max-width: 8.8rem;
        }

        // TODO: IE11 hack
        .no-csspositionsticky & {
          width: 100%;
          height: auto;
        }
      }
    }
  • URL: /components/raw/uol-accreditation-logos/_accreditation-logos.scss
  • Filesystem Path: src/library/02-components/accreditation-logos/_accreditation-logos.scss
  • Size: 5.6 KB 
{
  "accreditations": {
    "items": [
      {
        "title": "Association of MBAs",
        "url": "/link-1",
        "image": {
          "src": "/placeholders/ph-accreditation-04.svg"
        }
      },
      {
        "title": "EFMD",
        "url": "/link-2",
        "image": {
          "src": "/placeholders/ph-accreditation-05.svg"
        }
      },
      {
        "title": "AACSB",
        "url": "/link-3",
        "image": {
          "src": "/placeholders/ph-accreditation-06.svg"
        }
      },
      {
        "title": "University of Leeds",
        "url": "/link-4",
        "image": {
          "src": "/placeholders/ph-accreditation-07.svg"
        }
      }
    ]
  }
}