<div class="item-list ">
<div class="item-cell item-list__cell" data-font="" data-id="">
<a class="item-cell__content" href="#">
<div class="item-cell__main-text">
Väike mölder hüppas rongile.
</div>
<span class="item-cell__sub-text text-small">
Flex 0.1
</span>
</a>
</div>
<div class="item-cell item-list__cell" data-font="" data-id="">
<a class="item-cell__content" href="#">
<div class="item-cell__main-text">
Eriti väike mölder hüppas rongile.
</div>
<span class="item-cell__sub-text text-small">
Flex 0.1
</span>
</a>
</div>
<div class="item-cell item-list__cell" data-font="" data-id="">
<a class="item-cell__content" href="#">
<div class="item-cell__main-text">
Kõige väiksem mölder hüppas rongile.
</div>
<span class="item-cell__sub-text text-small">
Flex 0.1
</span>
</a>
</div>
<div class="item-cell item-list__cell" data-font="" data-id="">
<a class="item-cell__content" href="#">
<div class="item-cell__main-text">
Väike mölder hüppas eriti suurele rongile.
</div>
<span class="item-cell__sub-text text-small">
Flex 0.1
</span>
</a>
</div>
</div>
<div class="item-list {{ class }} {{ modifier }}">
{% for item in data.items %}
{% include '@item-cell' with {class: "item-list__cell", data: item} %}
{% endfor %}
</div>
{
"language": "en-US",
"data": {
"items": [
{
"mainText": "Väike mölder hüppas rongile.",
"subText": "Flex 0.1",
"link": "#"
},
{
"mainText": "Eriti väike mölder hüppas rongile.",
"subText": "Flex 0.1",
"link": "#"
},
{
"mainText": "Kõige väiksem mölder hüppas rongile.",
"subText": "Flex 0.1",
"link": "#"
},
{
"mainText": "Väike mölder hüppas eriti suurele rongile.",
"subText": "Flex 0.1",
"link": "#"
}
]
}
}
.item-list__cell {
box-shadow: 0 -1px 0 0 var(--color-brand) inset;
&:last-child {
margin-bottom: 76px;
@include bp(sm-min) {
margin-bottom: 160px;
}
}
}
import './item-list.scss';