<div class="logo-group-wrapper">
<section class="text-block" role="region" aria-labelledby="our-reputation">
<h2 id="our-reputation">Our reputation</h2>
<div class="logo-group logo-group-5-per-row">
<div class="logo">
<img src="../../images/logo-group/TopSite-Q4-2018.png" alt="Sitemorse Index Top Site Q4 2018" class="logo-img" />
</div>
<div class="logo">
<img src="../../images/logo-group/TopSite-Q1-2019.png" alt="Sitemorse Index Top Site Q1 2019" class="logo-img" />
</div>
<div class="logo">
<img src="../../images/logo-group/TopSite-Q2-2019.png" alt="Sitemorse Index Top Site Q2 2019" class="logo-img" />
</div>
<div class="logo">
<img src="../../images/logo-group/TopSite-Q3-2019.png" alt="Sitemorse Index Top Site Q3 2019" class="logo-img" />
</div>
<div class="logo">
<img src="../../images/logo-group/TopSite-Q4-2019.png" alt="Sitemorse Index Top Site Q4 2019" class="logo-img" />
</div>
</div>
<p class="logo-group-cta">
<a href="#" class="button-outline" title="Our reputation" role="button" tabindex="0" data-scroll>
View the latest full Sitemorse Index
<span class="button-overlay"><span>
View the latest full Sitemorse Index
</span></span></a> </p>
</section>
</div>
<div class="logo-group-wrapper">
{% embed '@text-block' with {title: title} %}
{% block content %}
{{ intro }}
{% if logos %}
<div class="logo-group logo-group-{{ per_row }}-per-row">
{% for logo in logos %}
<div class="logo">
{% if logo.href %}<a href="{{ logo.href }}" class="logo-a">{% endif %}
<img src="{{ logo.image_path | path }}" alt="{{ logo.alt }}" class="logo-img" />
{% if logo.href %}</a>{% endif %}
</div>
{% endfor %}
</div>
{% endif %}
{% if callToAction and callToAction.label and callToAction.href %}
<p class="logo-group-cta">
{% include '@button' with {
label: callToAction.label,
href: callToAction.href,
scheme: (scheme == 'black' or scheme == 'blue') ? 'white' : ''
} %}
</p>
{% endif %}
{% endblock %}
{% endembed %}
</div>
{
"title": "Our reputation",
"per_row": 5,
"logos": [
{
"image_path": "/images/logo-group/TopSite-Q4-2018.png",
"alt": "Sitemorse Index Top Site Q4 2018"
},
{
"image_path": "/images/logo-group/TopSite-Q1-2019.png",
"alt": "Sitemorse Index Top Site Q1 2019"
},
{
"image_path": "/images/logo-group/TopSite-Q2-2019.png",
"alt": "Sitemorse Index Top Site Q2 2019"
},
{
"image_path": "/images/logo-group/TopSite-Q3-2019.png",
"alt": "Sitemorse Index Top Site Q3 2019"
},
{
"image_path": "/images/logo-group/TopSite-Q4-2019.png",
"alt": "Sitemorse Index Top Site Q4 2019"
}
],
"callToAction": {
"label": "View the latest full Sitemorse Index",
"href": "#"
}
}
.logo {
lost-column: 4/8 2;
padding: .75em .5em;
.logo-group-1-per-row & {
lost-column: 6/8 2;
}
@include for-tablet-portrait-up {
lost-column: 4/12 3;
}
@include for-tablet-landscape-up {
lost-column: 2/10 5;
.logo-group-2-per-row & {
lost-column: 4/12 3;
}
}
&-group {
display: flex;
flex-wrap: wrap;
lost-utility: clearfix;
position: relative;
z-index: 1;
align-items: center;
margin-bottom: px-to-em(25, $body-font-size);
lost-align: center;
@include for-tablet-portrait-up {
margin-bottom: px-to-em(40, $body-font-size-tablet-portrait-up);
}
&-cta {
text-align: center;
}
}
&-a {
@include disable-underlines;
display: block;
}
&-img {
max-height: 100px;
display: block;
margin: 0 auto;
.logo-group-1-per-row &,
.logo-group-2-per-row & {
@include for-tablet-landscape-up {
max-height: 125px;
}
}
}
}
A logo or group of logos to a page, the optional heading and paragraph options allow context to be given to the user. In a group of 1 or 2 logos the size of the logos on tablet and desktop will be larger.