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