<div class="logo-group-wrapper">
<section class="text-block" role="region" aria-labelledby="award-winners">
<h2 id="award-winners">Award winners</h2>
<p>Our halls of residence are winners of three awards in the 2019 National Student Housing Survey Awards, as well as being shortlisted in six categories.</p>
<div class="logo-group logo-group-4-per-row">
<div class="logo">
<img src="../../images/logo-group/Student-Housing-Awards-2019.jpg" alt="This is an alt tag" class="logo-img" />
</div>
<div class="logo">
<img src="../../images/logo-group/Student-Housing-Awards-2019-2.jpg" alt="This is an alt tag" class="logo-img" />
</div>
<div class="logo">
<img src="../../images/logo-group/Student-Housing-Awards-2019-3.jpg" alt="This is an alt tag" class="logo-img" />
</div>
<div class="logo">
<img src="../../images/logo-group/Student-Housing-Awards-2019-4.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": "Award winners",
"per_row": 4,
"logos": [
{
"image_path": "/images/logo-group/Student-Housing-Awards-2019.jpg",
"alt": "This is an alt tag"
},
{
"image_path": "/images/logo-group/Student-Housing-Awards-2019-2.jpg",
"alt": "This is an alt tag"
},
{
"image_path": "/images/logo-group/Student-Housing-Awards-2019-3.jpg",
"alt": "This is an alt tag"
},
{
"image_path": "/images/logo-group/Student-Housing-Awards-2019-4.jpg",
"alt": "This is an alt tag"
}
],
"intro": "<p>Our halls of residence are winners of three awards in the 2019 National Student Housing Survey Awards, as well as being shortlisted in six categories.</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.