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:
<div class="partner-block {{ single_partner ? 'partner__single' : 'partner__multiple' }}">
<div class="partner-content intro">
{% if title or description %}
<div class="intro__content">
{% if title %}
{% include '@heading' with {
'heading': 'h2',
'heading_text': title
} %}
{% endif %}
{% if description %}
{% include '@paragraph' with {
'text': description
} %}
{% endif %}
</div>
{% endif %}
</div>
<div class="partner-content partners">
{% if single_partner %}
<a class="no-icon" 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>
{% else %}
<ul class="inline">
{% for item in items %}
<li>
<a class="no-icon" href="#" title="{{ link_text }}">
{% include '@image' with {
src: item.link| path,
alt_text: item.alt_text,
ratio: null
} %}
</a>
</li>
{% endfor %}
</ul>
{% endif %}
</div>
</div>
<div class="partner-block partner__multiple">
<div class="partner-content intro">
<div class="intro__content">
<h2>Partners title</h2>
<p>Here you may add information about the partners. The logos in this block are not predefined and can be changed per project.</p>
</div>
</div>
<div class="partner-content partners">
<ul class="inline">
<li>
<a class="no-icon" href="#" title="">
<figure><img src="../../styleguide/img/stock/partner1.svg" alt="University of Ghent" /></figure>
</a>
</li>
<li>
<a class="no-icon" href="#" title="">
<figure><img src="../../styleguide/img/stock/partner2.svg" alt="HoGent" /></figure>
</a>
</li>
<li>
<a class="no-icon" href="#" title="">
<figure><img src="../../styleguide/img/stock/partner3.svg" alt="Artevelde Hogeschool" /></figure>
</a>
</li>
<li>
<a class="no-icon" href="#" title="">
<figure><img src="../../styleguide/img/stock/partner4.svg" alt="Odisee" /></figure>
</a>
</li>
<li>
<a class="no-icon" href="#" title="">
<figure><img src="../../styleguide/img/stock/partner5.svg" alt="KU Leuven" /></figure>
</a>
</li>
<li>
<a class="no-icon" href="#" title="">
<figure><img src="../../styleguide/img/stock/partner6.svg" alt="Luca" /></figure>
</a>
</li>
<li>
<a class="no-icon" href="#" title="">
<figure><img src="../../styleguide/img/stock/partner7.svg" alt="Student in Ghent" /></figure>
</a>
</li>
</ul>
</div>
</div>
{
"title": "Partners title",
"description": "Here you may add 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"
}
]
}
.partner-block {
display: flex;
flex-direction: column;
padding: 0 20px;
@include desktop {
padding: 0 135px;
}
&.partner__multiple {
@include desktop {
flex-direction: row;
align-items: stretch;
justify-content: center;
}
.partner-content {
display: flex;
align-items: center;
min-height: 100%;
}
.intro {
@include desktop {
min-width: min-content;
max-width: 350px;
}
p:last-child {
margin-bottom: 0;
}
}
.partners {
@include theme('border-color', 'color-primary-light', 'partner-intro-border');
margin: 45px 0 0 ;
padding: 45px 0 0;
border-top-width: 2px;
border-top-style: solid;
@include desktop {
margin: 0 0 0 60px;
padding: 0 0 0 60px;
border-top: 0;
border-left-width: 2px;
border-left-style: solid;
}
}
}
&.partner__single {
align-items: center;
text-align: center;
.intro {
p:last-child {
margin-bottom: 30px;
}
}
}
h2 {
margin-bottom: 30px;
}
ul {
align-items: center;
justify-content: space-between;
gap: 30px 60px;
@include tablet {
justify-content: flex-start;
}
li {
width: auto;
height: 100px;
margin: 0;
}
}
a {
display: block;
width: auto;
height: 100%;
border: 0;
&[href^="http://"]:not([href*="gent.be"]),
&[href^="https://"]:not([href*="gent.be"]) {
&:not(.no-icon):not(.tag) {
margin-right: 0;
}
}
}
figure,
img {
width: auto;
max-width: 100%;
height: 100%;
}
}