<div class="logo-group-wrapper">
<section class="text-block" role="region" aria-labelledby="our-reputation">
<h2 id="our-reputation">Our reputation</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia eveniet porro earum nisi repudiandae molestias corporis natus rem dolorum error, placeat illum, itaque asperiores exercitationem culpa voluptates odio saepe at.</p>
<div class="logo-group logo-group-5-per-row">
<div class="logo">
<a href="http://www.derby.ac.uk/awards" class="logo-a"> <img src="../../images/logo-group/TEF-Gold-logo-RGB-portrait.jpg" alt="This is an alt tag" class="logo-img" />
</a> </div>
<div class="logo">
<img src="../../images/logo-group/TEF-Gold-logo-RGB.jpg" alt="This is an alt tag" class="logo-img" />
</div>
<div class="logo">
<a href="http://www.derby.ac.uk/awards" class="logo-a"> <img src="../../images/logo-group/TEF-Gold-logo-RGB-portrait.jpg" alt="This is an alt tag" class="logo-img" />
</a> </div>
<div class="logo">
<img src="../../images/logo-group/TEF-Gold-logo-RGB.jpg" alt="This is an alt tag" class="logo-img" />
</div>
<div class="logo">
<a href="http://www.derby.ac.uk/awards" class="logo-a"> <img src="../../images/logo-group/TEF-Gold-logo-RGB-portrait.jpg" alt="This is an alt tag" class="logo-img" />
</a> </div>
<div class="logo">
<img src="../../images/logo-group/TEF-Gold-logo-RGB.jpg" alt="This is an alt tag" class="logo-img" />
</div>
</div>
</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/TEF-Gold-logo-RGB-portrait.jpg",
"alt": "This is an alt tag",
"href": "http://www.derby.ac.uk/awards"
},
{
"image_path": "/images/logo-group/TEF-Gold-logo-RGB.jpg",
"alt": "This is an alt tag"
},
{
"image_path": "/images/logo-group/TEF-Gold-logo-RGB-portrait.jpg",
"alt": "This is an alt tag",
"href": "http://www.derby.ac.uk/awards"
},
{
"image_path": "/images/logo-group/TEF-Gold-logo-RGB.jpg",
"alt": "This is an alt tag"
},
{
"image_path": "/images/logo-group/TEF-Gold-logo-RGB-portrait.jpg",
"alt": "This is an alt tag",
"href": "http://www.derby.ac.uk/awards"
},
{
"image_path": "/images/logo-group/TEF-Gold-logo-RGB.jpg",
"alt": "This is an alt tag"
}
],
"intro": "<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia eveniet porro earum nisi repudiandae molestias corporis natus rem dolorum error, placeat illum, itaque asperiores exercitationem culpa voluptates odio saepe at.</p>"
}
.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.