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">
    <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"
        }
      }
    ]
  }
}