<div class="safety-tag">
<div class="safety-tag__image-wrap">
<figure class="image safety-tag__image">
<img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20280%20155%22%3E%3C%2Fsvg%3E" data-srcset="https://staging.pim.ramirent.ee//_default_upload_bucket/Ramirent_Pictograms_Safety_Hearing_Protection_2_RGB_1.png" data-sizes="auto" alt="" class="image__img lazyload">
</figure>
</div>
<div class="safety-tag__name">Kõrvatropid/klapid</div>
</div>
<div class="safety-tag">
<div class="safety-tag__image-wrap">
{% include '@image' with {
data: data.image|srcset('280x155'),
class: 'safety-tag__image',
modifier: ''
} %}
</div>
<div class="safety-tag__name">{{ data.name }}</div>
</div>
{
"language": "en-US",
"data": {
"image": {
"srcset": "https://staging.pim.ramirent.ee//_default_upload_bucket/Ramirent_Pictograms_Safety_Hearing_Protection_2_RGB_1.png"
},
"name": "Kõrvatropid/klapid"
}
}
.safety-tag {
padding: 8px;
background: $L-background;
display: flex;
border-radius: $border-radius-small;
align-items: center;
}
.safety-tag__image-wrap {
width: 24px;
margin-right: 8px;
display: flex;
align-items: center;
}
img {
.safety-tag__image & {
max-width: 100%;
}
}
import './safety-tag.scss';