University of Leeds Design System v1.0.15

Logo Group: Three Logos

Guidance

This component is used to highlight 3rd party logos within content areas. There is no limit to the amount of logos that can be displayed.

Developer guidance

This component accepts an array of logos as per the below structure.

Each item consists of:

  • ‘title’ - this is the name of the link and is displayed under the logo and acts as the alt tag for the image
  • ‘url’ - the URL of the linked organisation (this link is applied to the text, not the image)
  • ‘src’ (within ‘image’) - the relative path to the logo image.

Image guidance

Logos should wherever possible be svg files. If not available use png images. The maximum width of a logo will be 226px. The maximum height will be 96px. Although images will be resized to ensure these values aren’t exceeded, it is advised when using file formats with specific height and width values to make the longest edge (width or height) to match either of these values in order to optimise file size.

Example config

'context': {
    'logos': {
      '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',
          },
        },


<div class="uol-logo-group">
  {% for logo in logos.items %}
    <div class="uol-logo-group-item">
      <div class="uol-logo-group-item__container">
        <img class="uol-logo-group-item__logo" src="{{ logo.image.src }}" alt="{{ logo.title }}" >
      </div>
      <a class="uol-logo-group-item__link" href="{{ logo.url }}">{{ logo.title }}</a>
    </div>
  {% endfor %}
</div>
 
<div class="uol-logo-group">

    <div class="uol-logo-group-item">
        <div class="uol-logo-group-item__container">
            <img class="uol-logo-group-item__logo" src="/placeholders/ph-accreditation-04.svg" alt="Association of MBAs">
        </div>
        <a class="uol-logo-group-item__link" href="/link-1">Association of MBAs</a>
    </div>

    <div class="uol-logo-group-item">
        <div class="uol-logo-group-item__container">
            <img class="uol-logo-group-item__logo" src="/placeholders/ph-accreditation-05.svg" alt="EFMD">
        </div>
        <a class="uol-logo-group-item__link" href="/link-2">EFMD</a>
    </div>

    <div class="uol-logo-group-item">
        <div class="uol-logo-group-item__container">
            <img class="uol-logo-group-item__logo" src="/placeholders/ph-accreditation-06.svg" alt="AACSB">
        </div>
        <a class="uol-logo-group-item__link" href="/link-3">AACSB</a>
    </div>

</div>
  • Content: 
    .uol-logo-group {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-bottom: calc(#{$spacing-5} * -1);
}

  .uol-logo-group-item {
    width: 100%;

    margin-bottom: $spacing-5;
    
    
    @include media(">=uol-media-xs") {
      width: calc((100% - #{$spacing-4}) / 2);
      margin-right: $spacing-4;
      
      &:nth-child(2n+2) {
        margin-right: 0;
      }

    }

    @include media(">=uol-media-m") {
      width: calc((100% - 2 * #{$spacing-4}) / 3);
      margin-right: $spacing-4;
      
      &:nth-child(2n+2) {
        margin-right: $spacing-4;
      }
      
      &:nth-child(3n+3) {
        margin-right: 0;
      }

    }

    @include media(">=uol-media-l") {
      width: calc((100% - 2 * #{$spacing-5}) / 3);
      margin-right: $spacing-5;
      
      &:nth-child(2n+2) {
        margin-right: $spacing-5;
      }
    }

    @include media(">=uol-media-xl") {
      width: calc((100% - 2 * #{$spacing-6}) / 3);
      margin-right: $spacing-6;
      
      &:nth-child(2n+2) {
        margin-right: $spacing-6;
      }
      
    }

  }

    .uol-logo-group-item__container {
      border: 1px solid $color-border--light;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 144px; // max height of 96px plus 24px top and bottom
      margin-bottom: $spacing-1;
    }

    .uol-logo-group-item__logo {
      margin: 0 auto;
      max-height: 96px;
      max-width: 226px; 

      @include media(">=uol-media-xs") {
        max-width: 152px;
      }
  
      @include media(">=uol-media-s") {
        max-width: 163px;
      }
  
      @include media(">=uol-media-m") {
        max-width: 161px;
      }
  
      @include media(">=uol-media-l") {
        max-width: 168px;
      }
  
      @include media(">=uol-media-xl") {
        max-width: 171px;
      }
  
      @include media(">=uol-media-xxl") {
        max-width: 176px;
      }
    }

    .uol-logo-group-item__link {
      @include link_focus(3px);

      margin-bottom: $spacing-5; // TEMP, different for different viewpoints

      &:hover {
        text-decoration-color: $color-brand--bright;
      }
    }
  • URL: /components/raw/uol-logo-group/_logo-group.scss
  • Filesystem Path: src/library/02-components/logo-group/_logo-group.scss
  • Size: 2.2 KB 
{
  "logos": {
    "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"
        }
      }
    ]
  }
}