<ul class="mol-usp-list">
<li>
<i class="atm-icon fa fa-regular fa-road "></i>
<div>
<div class="atm-heading h5">Advies op maat</div>
Wij ontzorgen uw organisatie en denken mee.
</div>
</li>
<li>
<i class="atm-icon fa fa-regular fa-road "></i>
<div>
<div class="atm-heading h5">Gedreven professionals</div>
Met meer dan 75 jaar ervaring staan onze professionals voor u klaar.
</div>
</li>
<li>
<i class="atm-icon fa fa-regular fa-road "></i>
<div>
<div class="atm-heading h5">Positieve bijdrage</div>
Iedere dag dragen we bij aan een betere wereld.
</div>
</li>
<li>
<i class="atm-icon fa fa-regular fa-road "></i>
<div>
<div class="atm-heading h5">Positieve bijdrage</div>
Iedere dag dragen we bij aan een betere wereld.
</div>
</li>
<li>
<i class="atm-icon fa fa-regular fa-road "></i>
<div>
<div class="atm-heading h5">Positieve bijdrage</div>
Iedere dag dragen we bij aan een betere wereld.
</div>
</li>
</ul>
<ul class="mol-usp-list">
{{#each items}}
<li>
{{render '@icon' @root.icon }}
<div>
{{render '@heading' heading merge=true }}
{{text }}
</div>
</li>
{{/each}}
</ul>
{
"items": [
{
"heading": {
"tag": "div",
"modifier": "h5",
"text": "Advies op maat"
},
"text": "Wij ontzorgen uw organisatie en denken mee."
},
{
"heading": {
"tag": "div",
"modifier": "h5",
"text": "Gedreven professionals"
},
"text": "Met meer dan 75 jaar ervaring staan onze professionals voor u klaar."
},
{
"heading": {
"tag": "div",
"modifier": "h5",
"text": "Positieve bijdrage"
},
"text": "Iedere dag dragen we bij aan een betere wereld."
},
{
"heading": {
"tag": "div",
"modifier": "h5",
"text": "Positieve bijdrage"
},
"text": "Iedere dag dragen we bij aan een betere wereld."
},
{
"heading": {
"tag": "div",
"modifier": "h5",
"text": "Positieve bijdrage"
},
"text": "Iedere dag dragen we bij aan een betere wereld."
}
],
"icon": {
"style": "fa",
"icon": "fa-regular fa-road"
}
}
.mol-usp-list {
@apply grid md:grid-cols-2 lg:grid-cols-3 gap-4 gap-y-12;
li {
> a {
@apply hover:shadow-md;
}
.usp-list-item{
@apply flex p-4;
@apply transition-all duration-200;
word-break: break-word;
.atm-icon {
@apply mt-1 mr-4 text-lg;
@apply text-secondary-col-1;
}
.atm-heading {
@apply mb-1;
}
}
}
}
No notes defined.