Use the partner block to present a set of logos of partners, organizations or companies that are related to a web page or a web site.
Example usages of the partner block are:
Do not use the partner block to present a set of images. In this case, use the image gallery component or the image wall component instead.
The partner block contains the following elements:
Each logo of a partner, organization or company can optionally link to another web page or web site. Typically, this will be the web page or web site of the partner, organization or company.
The partner block works best:
{% set content %}
{% if title %}
{% include '@heading' with {
'type': 'h3',
'heading_text': title
} %}
{% endif %}
{% if description %}
{% include '@paragraph' with {
'text': description
} %}
{% endif %}
{% if single_partner %}
<div class="single-partner">
<a href="#" title="Link to the OCMW Ghent website. ">
{% include '@image' with {
src: '/styleguide/img/stock/ocmw-logo.svg' | path,
alt_text: 'OCMW Gent',
ratio: null
} %}
</a>
</div>
{% else %}
<div class="partners">
<ul class="inline">
{% for item in items %}
<li>
<a href="#" title="{{ link_text }}">
{% include '@image' with {
src: item.link| path,
alt_text: item.alt_text,
ratio: null
} %}
</a>
</li>
{% endfor %}
</ul>
</div>
{% endif %}
{% endset %}
{% include "@highlight--no-image" with {
content: content,
classes: ['partner-block']
} %}
<section class="highlight partner-block">
<div class="highlight__inner">
<p class="">Here comes information about the partners. The logos in this block are not predefined and can be changed per project.</p>
<div class="single-partner">
<a href="#" title="Link to the OCMW Ghent website. ">
<figure><img src="../../styleguide/img/stock/ocmw-logo.svg" alt="OCMW Gent" /></figure>
</a>
</div>
</div>
</section>
{
"title": "",
"description": "Here comes information about the partners. The logos in this block are not predefined and can be changed per project.",
"items": [
{
"link": "/styleguide/img/stock/partner1.svg",
"alt_text": "University of Ghent",
"link_title": "Link to the University of Ghent website"
},
{
"link": "/styleguide/img/stock/partner2.svg",
"alt_text": "HoGent",
"link_title": "Link to the HoGent website"
},
{
"link": "/styleguide/img/stock/partner3.svg",
"alt_text": "Artevelde Hogeschool",
"link_text": "Link to the Artevelde Hogeschool website"
},
{
"link": "/styleguide/img/stock/partner4.svg",
"alt_text": "Odisee",
"link_text": "Link to the Odisee website"
},
{
"link": "/styleguide/img/stock/partner5.svg",
"alt_text": "KU Leuven",
"link_text": "Link to the KU Leuven website"
},
{
"link": "/styleguide/img/stock/partner6.svg",
"alt_text": "Luca",
"link_text": "Link to the Luca website"
},
{
"link": "/styleguide/img/stock/partner7.svg",
"alt_text": "Student in Ghent",
"link_text": "Link to the Student in Ghent website"
}
],
"single_partner": true
}
.partner-block {
.highlight__inner {
display: flex;
flex-direction: column;
align-items: center;
padding: 2rem gutter();
@include tablet {
padding: 2rem 5.5rem;
}
}
p {
text-align: center;
}
.partners ul.inline {
display: flex;
align-items: center;
justify-content: space-evenly;
margin-top: 2.2rem;
li {
width: calc(50% - #{gutter()});
margin: 0 gutter()*.5 gutter();
text-align: center;
@include tablet {
width: calc(25% - #{gutter()});
}
}
}
.single-partner {
width: 9rem;
max-width: 100%;
margin: 1.5rem 0 1.2rem;
}
}