<div class="product-container js-product-container">
<div>
<h2 class="product-container__title">HAULOTTE COMPACT 10N</h2>
<div class="product-container__thumbnail">
<figure class="image product-container__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://www.ramirent.ee/wp-content/uploads/2022/09/haulotte20compact10N-600x600.jpg" data-sizes="auto" alt="" class="image__img lazyload">
</figure>
</div>
</div>
<div class="product-container__bottom">
<div class="product-container__specs">
<div class="product-container__spec">
<p class="product-container__spec-text">Pinge</p>
<p class="product-container__spec-text">36V</p>
</div>
<div class="product-container__spec">
<p class="product-container__spec-text">Lõiketera pikkus</p>
<p class="product-container__spec-text">0.5m</p>
</div>
<div class="product-container__spec">
<p class="product-container__spec-text">Kaal</p>
<p class="product-container__spec-text">3,1kg</p>
</div>
<div class="product-container__spec">
<p class="product-container__spec-text">Oksa diameeter, max</p>
<p class="product-container__spec-text">ø 20 mm</p>
</div>
</div>
<a href="/" class="button button--secondary">
<span class="button__inner">
<span class="button__text">Toote leht ja lisainfo</span>
</span>
</a>
</div>
</div>
<div class="product-container js-product-container">
<div>
{% if data.title is not empty %}
<h2 class="product-container__title">{{ data.title }}</h2>
{% endif %}
<div class="product-container__thumbnail">
{% include '@image' with {
data: data.image|srcset('280x155'),
class: 'product-container__image',
modifier: ''
} %}
</div>
</div>
<div class="product-container__bottom">
<div class="product-container__specs">
{% for spec in data.specs %}
<div class="product-container__spec">
<p class="product-container__spec-text">{{ spec.key }}</p>
<p class="product-container__spec-text">{{ spec.value }}</p>
</div>
{% endfor %}
</div>
{% include '@button' with { class:'', modifier: 'button--secondary', data: data.button } %}
</div>
</div>
{
"language": "en-US",
"data": {
"title": "HAULOTTE COMPACT 10N",
"thumbnailSrc": "https://www.ramirent.ee/wp-content/uploads/2022/09/STIHL20HSA2066PRO_02-600x400.jpg",
"specs": [
{
"key": "Pinge",
"value": "36V"
},
{
"key": "Lõiketera pikkus",
"value": "0.5m"
},
{
"key": "Kaal",
"value": "3,1kg"
},
{
"key": "Oksa diameeter, max",
"value": "ø 20 mm"
}
],
"button": {
"text": "Toote leht ja lisainfo",
"link": "/"
},
"image": {
"srcset": "https://www.ramirent.ee/wp-content/uploads/2022/09/haulotte20compact10N-600x600.jpg"
}
}
}
.product-container {
padding: 16px;
border-radius: $border-radius-base;
background: $L-background;
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.product-container__title {
color: $L-text-strong;
font-size: $font-size-base;
font-weight: $font-weight-medium;
margin-bottom: 16px;
}
.image__img {
.product-container__image & {
width: 100%;
max-width: 100%;
}
}
.product-container__thumbnail {
margin-bottom: 16px;
}
.product-container__specs {
margin-bottom: 16px;
}
.product-container__spec {
display: flex;
justify-content: space-between;
margin-bottom: 4px;
}
.product-container__spec-text {
max-width: 50%;
}
.product-container__bottom {
display: flex;
flex-direction: column;
justify-content: space-between;
}
import './product-container.scss';