<div class="brief-info">
<ul class="list brief-info__items-container">
<li class="brief-info__item">
<span class="brief-info__icon-wrapper " aria-label="">
<svg class="icon brief-info__icon" role="img">
<title>USP Check</title>
<use xlink:href="/images/icons-sprite.svg#usp-check"></use>
</svg>
</span>
<div class="brief-info__content">
<span class="brief-info__title ">
Gratis bezorgd
</span>
</div>
</li>
<li class="brief-info__item">
<span class="brief-info__icon-wrapper " aria-label="">
<svg class="icon brief-info__icon" role="img">
<title>USP Check</title>
<use xlink:href="/images/icons-sprite.svg#usp-check"></use>
</svg>
</span>
<div class="brief-info__content">
<span class="brief-info__title ">
Achteraf betalen
</span>
</div>
</li>
<li class="brief-info__item">
<span class="brief-info__icon-wrapper " aria-label="">
<svg class="icon brief-info__icon" role="img">
<title>USP Check</title>
<use xlink:href="/images/icons-sprite.svg#usp-check"></use>
</svg>
</span>
<div class="brief-info__content">
<span class="brief-info__title ">
Grootste van Benelux
</span>
</div>
</li>
</ul>
</div>
<div class="brief-info">
<ul class="list brief-info__items-container">
{{#each items as |item|}}
<li class="brief-info__item">
<span
class="brief-info__icon-wrapper {{ item.iconWrapperClass }}"
aria-label="{{ item.iconLabel }}"
>
{{ render '@icon' item.icon }}
</span>
<div class="brief-info__content">
<{{ item.title.tag }}
{{{ item.title.attributes }}}
class="brief-info__title {{ item.title.class }}"
>
{{ item.title.text }}
</{{ item.title.tag }}>
</div>
</li>
{{/each}}
</ul>
</div>
{
"items": [
{
"icon": {
"id": "usp-check",
"title": "USP Check",
"class": "brief-info__icon"
},
"title": {
"class": "",
"tag": "span",
"text": "Gratis bezorgd"
}
},
{
"icon": {
"id": "usp-check",
"title": "USP Check",
"class": "brief-info__icon"
},
"title": {
"class": "",
"tag": "span",
"text": "Achteraf betalen"
}
},
{
"class": "brief-info__icon",
"icon": {
"id": "usp-check",
"title": "USP Check",
"class": "brief-info__icon"
},
"title": {
"class": "",
"tag": "span",
"text": "Grootste van Benelux"
}
}
]
}
$brief-info__padding\@medium : $spacer--large 0 $spacer--large !default;
$brief-info__border : 1px $gray-light solid !default;
$brief-info__content-text-align : center !default;
$brief-info__content-text-align\@medium : left !default;
$brief-info__icon-border-radius : 32px !default;
$brief-info__icon-size : 18px !default;
$brief-info__icon-size\@large : 20px !default;
$brief-info__icon-padding : 0 $spacer--medium !default;
$brief-info__icon-padding\@medium : 0 !default;
$brief-info__icon-margin-bottom : $spacer !default;
$brief-info__icon-margin-bottom\@large : 0 !default;
$brief-info__link-font-size : $font-size-small !default;
$brief-info__link-font-weight : $font-weight-base !default;
$brief-info__link-text-decoration : none !default;
$brief-info__title-font-size : $font-size-base !default;
$brief-info__title-font-weight : $font-weight-normal !default;
$brief-info__title-line-height : 1em !default;
$brief-info__title-text-transform : normal !default;
$brief-info__title-margin-bottom : 0 !default;
.brief-info {
&__items-container {
display: flex;
flex-direction: column;
margin: 15px 0;
@include mq($screen-s) {
flex-direction: row;
justify-content: center;
}
@include mq($screen-m) {
margin: 0;
}
}
&__item {
display: flex;
align-items: center;
flex-direction: row;
margin-right: 12px;
&:last-child {
margin-right: 0;
}
}
&__icon-wrapper {
width: $brief-info__icon-size;
height: $brief-info__icon-size;
flex-shrink: 0;
margin-right: 10px;
@include mq($screen-l) {
width: $brief-info__icon-size\@large;
height: $brief-info__icon-size\@large;
}
}
&__icon {
width: 100%;
height: 100%;
fill: $red;
}
&__title {
margin-bottom: $brief-info__title-margin-bottom;
font-size: $brief-info__title-font-size;
text-transform: $brief-info__title-text-transform;
line-height: $brief-info__title-line-height;
font-weight: $brief-info__title-font-weight;
font-family: $font-family-saira;
color: $gray-font;
}
&__link {
font-size: $brief-info__link-font-size;
font-weight: $brief-info__link-font-weight;
text-decoration: $brief-info__link-text-decoration;
}
&__content {
text-align: $brief-info__content-text-align;
margin-right: 10px;
@include mq($screen-s) {
text-align: $brief-info__content-text-align\@medium;
}
}
}
There are no notes for this item.