<div class="collaboration ">
<figure class="image collaboration__logo">
<img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20440%20440%22%3E%3C%2Fsvg%3E" data-srcset="https://via.placeholder.com/220x69" data-sizes="auto" alt="" class="image__img lazyload">
</figure>
<div class="collaboration__title text-small">Public Services</div>
<div class="collaboration__content">Telia is the leading telecommunications provider in Scandinavia. From solid strategy to creative ideas and brilliant execution - everything to transform your business in the digital age and grow your business online. </div>
</div>
<div class="collaboration {{ modifier }} {{ class }}">
{% if data.image %}{% include '@image' with {class: 'collaboration__logo', modifier: '', data: data.image|srcset('440x440f')} %}{% endif %}
{% if data.title %}<div class="collaboration__title text-small">{{ data.title }}</div>{% endif %}
{% if data.content %}<div class="collaboration__content">{{ data.content }}</div>{% endif %}
</div>
{
"language": "en-US",
"data": {
"image": {
"srcset": "https://via.placeholder.com/220x69"
},
"title": "Public Services",
"content": "Telia is the leading telecommunications provider in Scandinavia. From solid strategy to creative ideas and brilliant execution - everything to transform your business in the digital age and grow your business online. "
}
}
.collaboration {
display: block;
}
.collaboration__logo {
display: block;
width: 100%;
height: 69px;
}
.image__img {
.collaboration__logo & {
width: 100%;
height: 100%;
object-fit: contain; //stylelint-disable-line
object-position: left;
}
}
.collaboration__content {
font-size: $font-size-small;
margin-top: 24px;
@include bp(sm-min) {
font-size: $font-size-base;
}
}
.collaboration__title {
margin-top: 24px;
@include bp(sm-min) {
margin-top: 31px;
}
}
import './collaboration.scss';