<div class="product-card">
<div class="product-card__img">
<img src="https://www.ramirent.ee/wp-content/uploads/2022/06/METABO20RFEV19-125RT_01-24-600x399.png" alt="">
</div>
<div class="product-card__content-wrap">
<h3 class="product-card__title">Lisaaku võimsusega 24 V - 225 Ah (C20)</h3>
<div class="product-card__button">
<button type="button" class="button">
<span class="button__inner">
<span class="button__text">Lisa rendikorvi</span>
</span>
</button>
</div>
</div>
</div>
<div class="product-card">
<div class="product-card__img">
{% if data.imgSrc is not empty %}
<img src="{{ data.imgSrc }}" alt="">
{% else %}
<div class="product-card__img-placeholder"></div>
{% endif %}
</div>
<div class="product-card__content-wrap">
<h3 class="product-card__title">{{ data.title }}</h3>
<div class="product-card__button">
{% include '@button' with { data: data.button, modifier: data.button.modifier } %}
</div>
</div>
</div>
{
"language": "en-US",
"data": {
"imgSrc": "https://www.ramirent.ee/wp-content/uploads/2022/06/METABO20RFEV19-125RT_01-24-600x399.png",
"title": "Lisaaku võimsusega 24 V - 225 Ah (C20)",
"button": {
"text": "Lisa rendikorvi"
}
}
}
.product-card {
background: $L-background;
padding: 16px;
display: flex;
min-width: 310px;
flex: 1;
@include bp(sm-min) {
max-width: 310px;
}
@include bp(md-min) {
max-width: 360px;
}
@include bp(lg-min) {
min-width: 375px;
}
}
.product-card__img {
min-width: 82px;
width: 82px;
height: 82px;
margin-right: 16px;
img {
width: 100%;
}
}
.product-card__img-placeholder {
height: 82px;
width: 82px;
background: #e1e1e1;
}
.product-card__title {
margin-bottom: 16px;
font-size: 16px;
font-weight: $font-weight-medium;
line-height: $line-height-small;
letter-spacing: $letter-spacing-default;
}
.product-card__button {
.button {
width: auto;
}
}
import './product-card.scss';