University of Leeds Design System v1.0.15

Accreditation Logos Widget

Guidance

This pattern is used to display linked logos in situations where the site owners want to evidence accreditations or display sponsorships or partnerships within a standard home page or landing page widget.

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.

When to use

  • When you need to evidence accreditations, partnerships or sponsorships on a landing or home page.

When not to use

  • Do not use as an image gallery. There is a @uol-gallery pattern instead.
  • Do not use within page content eg. document pages, blog posts, news etc

Developer guidance

The accreditation logos widget makes use of the @uol-accreditation-logos component

{% if accreditations.items.length %}
  {% extends '@uol-widget' %}

  {% block widget_content %}
    {% render '@uol-accreditation-logos', { accreditations: accreditations } %}
  {% endblock %}
{% endif %}
 
<div class="uol-widget-container uol-widget-container__">
    <div class="uol-widget">

        <div class="uol-widget__left-col">

            <div class="uol-widget__head">

                <h2 class="uol-widget__title">Our partners</h2>

            </div>

        </div>

        <div class="uol-widget__content">

            <div class="uol-accreditations">

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

            </div>

        </div>
    </div>
</div>
 
{
  "widget_title": "Our partners",
  "accreditations": {
    "heading_level": "h2",
    "type": "accreditation-logos",
    "items": [
      {
        "title": "Association of MBAs",
        "url": "/accreditation-link-1",
        "image": {
          "src": "/placeholders/ph-accreditation-04.svg"
        }
      },
      {
        "title": "EFMD",
        "url": "/accreditation-link-2",
        "image": {
          "src": "/placeholders/ph-accreditation-05.svg"
        }
      },
      {
        "title": "AACSB",
        "url": "/accreditation-link-3",
        "image": {
          "src": "/placeholders/ph-accreditation-06.svg"
        }
      },
      {
        "title": "University of Leeds",
        "url": "/accreditation-link-4",
        "image": {
          "src": "/placeholders/ph-accreditation-07.svg"
        }
      }
    ]
  }
}