<!-- Link List Red -->
<div class="link-list red">
<div class="link-list-header ">
<h3 class="heading title">
Lorem ipsum dolor sit amet
</h3>
</div>
<ul>
<li class="link-list-li">
<a href="#" class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">A USP for UHasselt</span>
</a>
</li>
<li class="link-list-li">
<a class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">Another USP for UHasselt</span>
</a>
</li>
<li class="link-list-li">
<a class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">And a third USP for UHasselt</span>
</a>
</li>
<li class="link-list-li">
<a class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">And a third USP for UHasselt</span>
</a>
</li>
</ul>
<div class="link-list-bottom-link ">
<a href="#" class="button button-black ">
<span>
<span class="icon fal fa-envelope " aria-hidden="true"></span>
<span class="text">
This is a CTA Button
</span>
</span>
</a>
</div>
</div>
<!-- Link List Transparent Icons -->
<div class="link-list transparent">
<ul>
<li class="link-list-li-icon">
<a href="#" class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">A USP for UHasselt</span>
</a>
<div class='item-toggle'>
<input class='item-toggle-input' type='checkbox' id='replace-id-with-backend-1' name='replace-name-with-backend-1' value='replace-value-with-backend-1' />
<label for='replace-id-with-backend-1' class='icon-checked'>
<span class="icon fas fa-heart " aria-hidden="true"></span>
</label>
<label for='replace-id-with-backend-1' class='icon-unchecked'>
<span class="icon fal fa-heart " aria-hidden="true"></span>
</label>
</div>
</li>
<li class="link-list-li-icon">
<a class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">Another USP for UHasselt</span>
</a>
<div class='item-toggle'>
<input class='item-toggle-input' type='checkbox' id='replace-id-with-backend-2' name='replace-name-with-backend-2' value='replace-value-with-backend-2' />
<label for='replace-id-with-backend-2' class='icon-checked'>
<span class="icon fas fa-heart " aria-hidden="true"></span>
</label>
<label for='replace-id-with-backend-2' class='icon-unchecked'>
<span class="icon fal fa-heart " aria-hidden="true"></span>
</label>
</div>
</li>
<li class="link-list-li-icon">
<a class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">And a third USP for UHasselt</span>
</a>
<div class='item-toggle'>
<input class='item-toggle-input' type='checkbox' id='replace-id-with-backend-3' name='replace-name-with-backend-3' value='replace-value-with-backend-3' />
<label for='replace-id-with-backend-3' class='icon-checked'>
<span class="icon fas fa-heart " aria-hidden="true"></span>
</label>
<label for='replace-id-with-backend-3' class='icon-unchecked'>
<span class="icon fal fa-heart " aria-hidden="true"></span>
</label>
</div>
</li>
<li class="link-list-li-icon">
<a class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">And a third USP for UHasselt</span>
</a>
<div class='item-toggle'>
<input class='item-toggle-input' type='checkbox' id='replace-id-with-backend-4' name='replace-name-with-backend-4' value='replace-value-with-backend-4' />
<label for='replace-id-with-backend-4' class='icon-checked'>
<span class="icon fas fa-heart " aria-hidden="true"></span>
</label>
<label for='replace-id-with-backend-4' class='icon-unchecked'>
<span class="icon fal fa-heart " aria-hidden="true"></span>
</label>
</div>
</li>
</ul>
</div>
<!-- Link List Transparent Icons Single -->
<div class="link-list transparent">
<ul>
<li class="link-list-li-icon">
<a href="#" class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">A USP for UHasselt</span>
</a>
<div class='item-toggle'>
<input class='item-toggle-input' type='checkbox' id='replace-id-with-backend' name='replace-name-with-backend' value='replace-value-with-backend' />
<label for='replace-id-with-backend' class='icon-checked'>
<span class="icon fas fa-heart " aria-hidden="true"></span>
</label>
<label for='replace-id-with-backend' class='icon-unchecked'>
<span class="icon fal fa-heart " aria-hidden="true"></span>
</label>
</div>
</li>
</ul>
</div>
<!-- Link List Clear -->
<div class="link-list transparent">
<ul>
<li class="link-list-li">
<a href="#" class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">A USP for UHasselt</span>
</a>
</li>
<li class="link-list-li">
<a class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">Another USP for UHasselt</span>
</a>
</li>
<li class="link-list-li">
<a class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">And a third USP for UHasselt</span>
</a>
</li>
<li class="link-list-li">
<a class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">And a third USP for UHasselt</span>
</a>
</li>
</ul>
</div>
<!-- Link List Transparent No Cta -->
<div class="link-list transparent">
<div class="link-list-header ">
<h3 class="heading title">
Lorem ipsum dolor sit amet
</h3>
</div>
<ul>
<li class="link-list-li">
<a href="#" class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">A USP for UHasselt</span>
</a>
</li>
<li class="link-list-li">
<a class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">Another USP for UHasselt</span>
</a>
</li>
<li class="link-list-li">
<a class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">And a third USP for UHasselt</span>
</a>
</li>
<li class="link-list-li">
<a class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">And a third USP for UHasselt</span>
</a>
</li>
</ul>
</div>
<!-- Link List Transparent No Cta 12 -->
<div class="link-list transparent">
<div class="link-list-header ">
<h3 class="heading title">
Lorem ipsum dolor sit amet
</h3>
</div>
<ul class="link-list-ul">
<li class="link-list-li">
<a href="#" class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">A USP for UHasselt</span>
</a>
</li>
<li class="link-list-li">
<a href="#" class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">Another USP for UHasselt</span>
</a>
</li>
<li class="link-list-li">
<a href="#" class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">And a third USP for UHasselt</span>
</a>
</li>
<li class="link-list-li">
<a href="#" class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">And a third USP for UHasselt</span>
</a>
</li>
<li class="link-list-li">
<a href="#" class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">A USP for UHasselt</span>
</a>
</li>
<li class="link-list-li">
<a href="#" class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">Another USP for UHasselt</span>
</a>
</li>
<li class="link-list-li">
<a href="#" class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">And a third USP for UHasselt</span>
</a>
</li>
<li class="link-list-li">
<a href="#" class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">And a third USP for UHasselt</span>
</a>
</li>
<li class="link-list-li">
<a href="#" class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">A USP for UHasselt</span>
</a>
</li>
<li class="link-list-li">
<a href="#" class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">Another USP for UHasselt</span>
</a>
</li>
<li class="link-list-li">
<a href="#" class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">And a third USP for UHasselt</span>
</a>
</li>
<li class="link-list-li">
<a href="#" class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">And a third USP for UHasselt</span>
</a>
</li>
</ul>
</div>
<!-- Link List Transparent No Cta 6 -->
<div class="link-list transparent">
<ul class="link-list-ul">
<li class="link-list-li">
<a href="#" class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">A USP for UHasselt</span>
</a>
</li>
<li class="link-list-li">
<a href="#" class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">Another USP for UHasselt</span>
</a>
</li>
<li class="link-list-li">
<a href="#" class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">And a third USP for UHasselt</span>
</a>
</li>
<li class="link-list-li">
<a href="#" class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">And a third USP for UHasselt</span>
</a>
</li>
<li class="link-list-li">
<a href="#" class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">A USP for UHasselt</span>
</a>
</li>
<li class="link-list-li">
<a href="#" class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">Another USP for UHasselt</span>
</a>
</li>
</ul>
</div>
<!-- Link List Red Simple -->
<div class="link-list red-simple">
<ul>
<li class="link-list-li">
<a><a href="#" class="link " aria-label="" title="This is what a link looks like">
<span class="text">This is what a link looks like</span>
</a>
</a>
</li>
<li class="link-list-li">
<a><a href="#" class="link " aria-label="" title="This is what a link looks like">
<span class="text">This is what a link looks like</span>
</a>
</a>
</li>
<li class="link-list-li">
<a><a href="#" class="link " aria-label="" title="This is what a link looks like">
<span class="text">This is what a link looks like</span>
</a>
</a>
</li>
<li class="link-list-li">
<a><a href="#" class="link " aria-label="" title="This is what a link looks like">
<span class="text">This is what a link looks like</span>
</a>
</a>
</li>
</ul>
</div>
<!-- Link List Gray -->
<div class="link-list gray">
<div class="link-list-header ">
<h3 class="heading title">
Lorem ipsum dolor sit amet
</h3>
</div>
<ul>
<li class="link-list-li">
<a href="#" class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">A USP for UHasselt</span>
</a>
</li>
<li class="link-list-li">
<a class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">Another USP for UHasselt</span>
</a>
</li>
<li class="link-list-li">
<a class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">And a third USP for UHasselt</span>
</a>
</li>
<li class="link-list-li">
<a class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">And a third USP for UHasselt</span>
</a>
</li>
</ul>
<div class="link-list-bottom-link ">
<a href="#" class="button button-black ">
<span>
<span class="icon fal fa-envelope " aria-hidden="true"></span>
<span class="text">
This is a CTA Button
</span>
</span>
</a>
</div>
</div>
<!-- Link List White -->
<div class="link-list white">
<ul>
<li class="link-list-li">
<a href="#" class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">A USP for UHasselt</span>
</a>
</li>
<li class="link-list-li">
<a class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">Another USP for UHasselt</span>
</a>
</li>
<li class="link-list-li">
<a class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">And a third USP for UHasselt</span>
</a>
</li>
<li class="link-list-li">
<a class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">And a third USP for UHasselt</span>
</a>
</li>
</ul>
<div class="link-list-bottom-link ">
<a href="#" class="button button-black ">
<span>
<span class="icon fal fa-envelope " aria-hidden="true"></span>
<span class="text">
This is a CTA Button
</span>
</span>
</a>
</div>
</div>
<!-- Link List White Red -->
<div class="link-list white-red">
<div class="link-list-header ">
<div class="link-list-icon-header">
<div class="link-list-header-icon">
<span class="icon far fa-graduation-cap " aria-hidden="true"></span>
</div>
<h3 class="heading title">
Lorem ipsum dolor sit amet
</h3>
</div>
</div>
<ul>
<li class="link-list-li">
<a href="#" class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">A USP for UHasselt</span>
</a>
</li>
<div class="link-bottom-line"></div>
<li class="link-list-li">
<a class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">Another USP for UHasselt</span>
</a>
</li>
<div class="link-bottom-line"></div>
<li class="link-list-li">
<a class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">And a third USP for UHasselt</span>
</a>
</li>
<div class="link-bottom-line"></div>
<li class="link-list-li">
<a class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">And a third USP for UHasselt</span>
</a>
</li>
<div class="link-bottom-line"></div>
</ul>
<div class="link-list-bottom-link button-link-margin">
<a href="#" class="button button-red ">
<span>
<span class="icon fal fa-envelope " aria-hidden="true"></span>
<span class="text">
This is a CTA Button
</span>
</span>
</a>
</div>
</div>
<!-- Link List White Red No Button -->
<div class="link-list transparent">
<div class="link-list-header ">
<div class="link-list-icon-header">
<div class="link-list-header-icon">
<span class="icon far fa-graduation-cap " aria-hidden="true"></span>
</div>
<h3 class="heading title">
Lorem ipsum dolor sit amet
</h3>
</div>
</div>
<ul>
<li class="link-list-li">
<a href="#" class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">A USP for UHasselt</span>
</a>
</li>
<li class="link-list-li">
<a class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">Another USP for UHasselt</span>
</a>
</li>
<li class="link-list-li">
<a class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">And a third USP for UHasselt</span>
</a>
</li>
<li class="link-list-li">
<a class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">And a third USP for UHasselt</span>
</a>
</li>
</ul>
</div>
<!-- Link List White No Button -->
<div class="link-list white-red">
<div class="link-list-header ">
<h3 class="heading title">
Lorem ipsum dolor sit amet
</h3>
</div>
<ul>
<li class="link-list-li">
<a href="#" class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">A USP for UHasselt</span>
</a>
</li>
<div class="link-bottom-line"></div>
<li class="link-list-li">
<a class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">Another USP for UHasselt</span>
</a>
</li>
<div class="link-bottom-line"></div>
<li class="link-list-li">
<a class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">And a third USP for UHasselt</span>
</a>
</li>
<div class="link-bottom-line"></div>
<li class="link-list-li">
<a class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">And a third USP for UHasselt</span>
</a>
</li>
<div class="link-bottom-line"></div>
</ul>
</div>
<!-- Link List White Tag -->
<div class="link-list white-red">
<div class="link-list-header header-tag">
<h3 class="heading title">
Lorem ipsum dolor sit amet
</h3>
<div class="link-list-header-tag">
<span class="tag tag-sm tag-red tag-round tag-sm">
This is a tag
</span>
</div>
</div>
<ul>
<li class="link-list-li">
<a href="#" class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">A USP for UHasselt</span>
</a>
</li>
<div class="link-bottom-line"></div>
<li class="link-list-li">
<a class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">Another USP for UHasselt</span>
</a>
</li>
<div class="link-bottom-line"></div>
<li class="link-list-li">
<a class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">And a third USP for UHasselt</span>
</a>
</li>
<div class="link-bottom-line"></div>
<li class="link-list-li">
<a class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">And a third USP for UHasselt</span>
</a>
</li>
<div class="link-bottom-line"></div>
</ul>
<div class="link-list-bottom-link button-link-margin">
<a href="#" class="link " aria-label="" title="This is what a link looks like">
<span class="text">This is what a link looks like</span>
</a>
</div>
</div>
<div class="link-list {{modifier}}">
{{#if heading}}
<div class="link-list-header {{#if tag}}header-tag{{/if}}">
{{#if icon}}
<div class="link-list-icon-header">
{{/if}}
{{#if icon}}
<div class="link-list-header-icon">
{{render '@icon' icon }}
</div>
{{/if}}
{{ render '@heading' heading }}
{{#if icon}}
</div>
{{/if}}
{{#if tag}}
<div class="link-list-header-tag">
{{render '@tag--tag-red-round'}}
</div>
{{/if}}
</div>
{{/if}}
<ul {{#if multiple-cols}}class="link-list-ul"{{/if}}>
{{#each items}}
{{#if @root.whiteArrow}}
<li class="link-list-li{{#if @root.toggleIcon}}-icon{{/if}}">
{{ render '@link' this }}
{{#if @root.toggleIcon}}
{{ render '@item-toggle' toggle merge=true }}
{{/if}}
</li>
{{else}}
<li class="link-list-li">
<a>{{ render '@link' }}</a>
{{#if @root.toggleIcon}}
{{ render '@item-toggle' toggle merge=true }}
{{/if}}
</li>
{{/if}}
{{#if @root.border}}
<div class="link-bottom-line"></div>
{{/if}}
{{/each}}
</ul>
{{#if cta}}
<div class="link-list-bottom-link {{#if border}}button-link-margin{{/if}}">
{{ render '@button' cta merge=true }}
{{#if link}}
{{ render '@link' }}
{{/if}}
</div>
{{else if link}}
<div class="link-list-bottom-link {{#if border}}button-link-margin{{/if}}">
{{ render '@link' }}
</div>
{{/if}}
</div>
/* Link List Red */
{
"modifier": "red",
"border": false,
"heading": {
"tag": "h3",
"text": "Lorem ipsum dolor sit amet",
"modifier": "title"
},
"icon": false,
"toggleIcon": false,
"whiteArrow": true,
"multiple-cols": false,
"tag": false,
"link": false,
"items": [
{
"text": "A USP for UHasselt",
"href": "#",
"iconBefore": {
"style": "fas",
"icon": "fa-caret-right"
},
"toggle": {
"id": "replace-id-with-backend-1",
"name": "replace-name-with-backend-1",
"value": "replace-value-with-backend-1",
"icon": {
"icon-checked": {
"style": "fas",
"icon": "fa-heart"
},
"icon-unchecked": {
"style": "fal",
"icon": "fa-heart"
}
}
}
},
{
"text": "Another USP for UHasselt",
"iconBefore": {
"style": "fas",
"icon": "fa-caret-right"
},
"toggle": {
"id": "replace-id-with-backend-2",
"name": "replace-name-with-backend-2",
"value": "replace-value-with-backend-2",
"icon": {
"icon-checked": {
"style": "fas",
"icon": "fa-heart"
},
"icon-unchecked": {
"style": "fal",
"icon": "fa-heart"
}
}
}
},
{
"text": "And a third USP for UHasselt",
"iconBefore": {
"style": "fas",
"icon": "fa-caret-right"
},
"toggle": {
"id": "replace-id-with-backend-3",
"name": "replace-name-with-backend-3",
"value": "replace-value-with-backend-3",
"icon": {
"icon-checked": {
"style": "fas",
"icon": "fa-heart"
},
"icon-unchecked": {
"style": "fal",
"icon": "fa-heart"
}
}
}
},
{
"text": "And a third USP for UHasselt",
"iconBefore": {
"style": "fas",
"icon": "fa-caret-right"
},
"toggle": {
"id": "replace-id-with-backend-4",
"name": "replace-name-with-backend-4",
"value": "replace-value-with-backend-4",
"icon": {
"icon-checked": {
"style": "fas",
"icon": "fa-heart"
},
"icon-unchecked": {
"style": "fal",
"icon": "fa-heart"
}
}
}
}
],
"cta": {
"text": "This is a CTA Button",
"id": "",
"icon": {
"style": "fal",
"icon": "fa-user-graduate"
}
}
}
/* Link List Transparent Icons */
{
"modifier": "transparent",
"border": false,
"heading": false,
"icon": false,
"toggleIcon": true,
"whiteArrow": true,
"multiple-cols": false,
"tag": false,
"link": false,
"items": [
{
"text": "A USP for UHasselt",
"href": "#",
"iconBefore": {
"style": "fas",
"icon": "fa-caret-right"
},
"toggle": {
"id": "replace-id-with-backend-1",
"name": "replace-name-with-backend-1",
"value": "replace-value-with-backend-1",
"icon": {
"icon-checked": {
"style": "fas",
"icon": "fa-heart"
},
"icon-unchecked": {
"style": "fal",
"icon": "fa-heart"
}
}
}
},
{
"text": "Another USP for UHasselt",
"iconBefore": {
"style": "fas",
"icon": "fa-caret-right"
},
"toggle": {
"id": "replace-id-with-backend-2",
"name": "replace-name-with-backend-2",
"value": "replace-value-with-backend-2",
"icon": {
"icon-checked": {
"style": "fas",
"icon": "fa-heart"
},
"icon-unchecked": {
"style": "fal",
"icon": "fa-heart"
}
}
}
},
{
"text": "And a third USP for UHasselt",
"iconBefore": {
"style": "fas",
"icon": "fa-caret-right"
},
"toggle": {
"id": "replace-id-with-backend-3",
"name": "replace-name-with-backend-3",
"value": "replace-value-with-backend-3",
"icon": {
"icon-checked": {
"style": "fas",
"icon": "fa-heart"
},
"icon-unchecked": {
"style": "fal",
"icon": "fa-heart"
}
}
}
},
{
"text": "And a third USP for UHasselt",
"iconBefore": {
"style": "fas",
"icon": "fa-caret-right"
},
"toggle": {
"id": "replace-id-with-backend-4",
"name": "replace-name-with-backend-4",
"value": "replace-value-with-backend-4",
"icon": {
"icon-checked": {
"style": "fas",
"icon": "fa-heart"
},
"icon-unchecked": {
"style": "fal",
"icon": "fa-heart"
}
}
}
}
],
"cta": false
}
/* Link List Transparent Icons Single */
{
"modifier": "transparent",
"border": false,
"heading": false,
"icon": false,
"toggleIcon": true,
"whiteArrow": true,
"multiple-cols": false,
"tag": false,
"link": false,
"items": [
{
"text": "A USP for UHasselt",
"href": "#",
"iconBefore": {
"style": "fas",
"icon": "fa-caret-right"
}
}
],
"cta": false
}
/* Link List Clear */
{
"modifier": "transparent",
"border": false,
"heading": false,
"icon": false,
"toggleIcon": false,
"whiteArrow": true,
"multiple-cols": false,
"tag": false,
"link": false,
"items": [
{
"text": "A USP for UHasselt",
"href": "#",
"iconBefore": {
"style": "fas",
"icon": "fa-caret-right"
},
"toggle": {
"id": "replace-id-with-backend-1",
"name": "replace-name-with-backend-1",
"value": "replace-value-with-backend-1",
"icon": {
"icon-checked": {
"style": "fas",
"icon": "fa-heart"
},
"icon-unchecked": {
"style": "fal",
"icon": "fa-heart"
}
}
}
},
{
"text": "Another USP for UHasselt",
"iconBefore": {
"style": "fas",
"icon": "fa-caret-right"
},
"toggle": {
"id": "replace-id-with-backend-2",
"name": "replace-name-with-backend-2",
"value": "replace-value-with-backend-2",
"icon": {
"icon-checked": {
"style": "fas",
"icon": "fa-heart"
},
"icon-unchecked": {
"style": "fal",
"icon": "fa-heart"
}
}
}
},
{
"text": "And a third USP for UHasselt",
"iconBefore": {
"style": "fas",
"icon": "fa-caret-right"
},
"toggle": {
"id": "replace-id-with-backend-3",
"name": "replace-name-with-backend-3",
"value": "replace-value-with-backend-3",
"icon": {
"icon-checked": {
"style": "fas",
"icon": "fa-heart"
},
"icon-unchecked": {
"style": "fal",
"icon": "fa-heart"
}
}
}
},
{
"text": "And a third USP for UHasselt",
"iconBefore": {
"style": "fas",
"icon": "fa-caret-right"
},
"toggle": {
"id": "replace-id-with-backend-4",
"name": "replace-name-with-backend-4",
"value": "replace-value-with-backend-4",
"icon": {
"icon-checked": {
"style": "fas",
"icon": "fa-heart"
},
"icon-unchecked": {
"style": "fal",
"icon": "fa-heart"
}
}
}
}
],
"cta": false
}
/* Link List Transparent No Cta */
{
"modifier": "transparent",
"border": false,
"heading": {
"tag": "h3",
"text": "Lorem ipsum dolor sit amet",
"modifier": "title"
},
"icon": false,
"toggleIcon": false,
"whiteArrow": true,
"multiple-cols": false,
"tag": false,
"link": false,
"items": [
{
"text": "A USP for UHasselt",
"href": "#",
"iconBefore": {
"style": "fas",
"icon": "fa-caret-right"
},
"toggle": {
"id": "replace-id-with-backend-1",
"name": "replace-name-with-backend-1",
"value": "replace-value-with-backend-1",
"icon": {
"icon-checked": {
"style": "fas",
"icon": "fa-heart"
},
"icon-unchecked": {
"style": "fal",
"icon": "fa-heart"
}
}
}
},
{
"text": "Another USP for UHasselt",
"iconBefore": {
"style": "fas",
"icon": "fa-caret-right"
},
"toggle": {
"id": "replace-id-with-backend-2",
"name": "replace-name-with-backend-2",
"value": "replace-value-with-backend-2",
"icon": {
"icon-checked": {
"style": "fas",
"icon": "fa-heart"
},
"icon-unchecked": {
"style": "fal",
"icon": "fa-heart"
}
}
}
},
{
"text": "And a third USP for UHasselt",
"iconBefore": {
"style": "fas",
"icon": "fa-caret-right"
},
"toggle": {
"id": "replace-id-with-backend-3",
"name": "replace-name-with-backend-3",
"value": "replace-value-with-backend-3",
"icon": {
"icon-checked": {
"style": "fas",
"icon": "fa-heart"
},
"icon-unchecked": {
"style": "fal",
"icon": "fa-heart"
}
}
}
},
{
"text": "And a third USP for UHasselt",
"iconBefore": {
"style": "fas",
"icon": "fa-caret-right"
},
"toggle": {
"id": "replace-id-with-backend-4",
"name": "replace-name-with-backend-4",
"value": "replace-value-with-backend-4",
"icon": {
"icon-checked": {
"style": "fas",
"icon": "fa-heart"
},
"icon-unchecked": {
"style": "fal",
"icon": "fa-heart"
}
}
}
}
],
"cta": false
}
/* Link List Transparent No Cta 12 */
{
"modifier": "transparent",
"border": false,
"heading": {
"tag": "h3",
"text": "Lorem ipsum dolor sit amet",
"modifier": "title"
},
"icon": false,
"toggleIcon": false,
"whiteArrow": true,
"multiple-cols": true,
"tag": false,
"link": false,
"items": [
{
"text": "A USP for UHasselt",
"href": "#",
"iconBefore": {
"style": "fas",
"icon": "fa-caret-right"
}
},
{
"text": "Another USP for UHasselt",
"href": "#",
"iconBefore": {
"style": "fas",
"icon": "fa-caret-right"
}
},
{
"text": "And a third USP for UHasselt",
"href": "#",
"iconBefore": {
"style": "fas",
"icon": "fa-caret-right"
}
},
{
"text": "And a third USP for UHasselt",
"href": "#",
"iconBefore": {
"style": "fas",
"icon": "fa-caret-right"
}
},
{
"text": "A USP for UHasselt",
"href": "#",
"iconBefore": {
"style": "fas",
"icon": "fa-caret-right"
}
},
{
"text": "Another USP for UHasselt",
"href": "#",
"iconBefore": {
"style": "fas",
"icon": "fa-caret-right"
}
},
{
"text": "And a third USP for UHasselt",
"href": "#",
"iconBefore": {
"style": "fas",
"icon": "fa-caret-right"
}
},
{
"text": "And a third USP for UHasselt",
"href": "#",
"iconBefore": {
"style": "fas",
"icon": "fa-caret-right"
}
},
{
"text": "A USP for UHasselt",
"href": "#",
"iconBefore": {
"style": "fas",
"icon": "fa-caret-right"
}
},
{
"text": "Another USP for UHasselt",
"href": "#",
"iconBefore": {
"style": "fas",
"icon": "fa-caret-right"
}
},
{
"text": "And a third USP for UHasselt",
"href": "#",
"iconBefore": {
"style": "fas",
"icon": "fa-caret-right"
}
},
{
"text": "And a third USP for UHasselt",
"href": "#",
"iconBefore": {
"style": "fas",
"icon": "fa-caret-right"
}
}
],
"cta": false
}
/* Link List Transparent No Cta 6 */
{
"modifier": "transparent",
"border": false,
"heading": false,
"icon": false,
"toggleIcon": false,
"whiteArrow": true,
"multiple-cols": true,
"tag": false,
"link": false,
"items": [
{
"text": "A USP for UHasselt",
"href": "#",
"iconBefore": {
"style": "fas",
"icon": "fa-caret-right"
}
},
{
"text": "Another USP for UHasselt",
"href": "#",
"iconBefore": {
"style": "fas",
"icon": "fa-caret-right"
}
},
{
"text": "And a third USP for UHasselt",
"href": "#",
"iconBefore": {
"style": "fas",
"icon": "fa-caret-right"
}
},
{
"text": "And a third USP for UHasselt",
"href": "#",
"iconBefore": {
"style": "fas",
"icon": "fa-caret-right"
}
},
{
"text": "A USP for UHasselt",
"href": "#",
"iconBefore": {
"style": "fas",
"icon": "fa-caret-right"
}
},
{
"text": "Another USP for UHasselt",
"href": "#",
"iconBefore": {
"style": "fas",
"icon": "fa-caret-right"
}
}
],
"cta": false
}
/* Link List Red Simple */
{
"modifier": "red-simple",
"border": false,
"heading": false,
"icon": false,
"toggleIcon": false,
"whiteArrow": false,
"multiple-cols": false,
"tag": false,
"link": false,
"items": [
{
"text": "A USP for UHasselt",
"href": "#",
"iconBefore": {
"style": "fas",
"icon": "fa-caret-right"
},
"toggle": {
"id": "replace-id-with-backend-1",
"name": "replace-name-with-backend-1",
"value": "replace-value-with-backend-1",
"icon": {
"icon-checked": {
"style": "fas",
"icon": "fa-heart"
},
"icon-unchecked": {
"style": "fal",
"icon": "fa-heart"
}
}
}
},
{
"text": "Another USP for UHasselt",
"iconBefore": {
"style": "fas",
"icon": "fa-caret-right"
},
"toggle": {
"id": "replace-id-with-backend-2",
"name": "replace-name-with-backend-2",
"value": "replace-value-with-backend-2",
"icon": {
"icon-checked": {
"style": "fas",
"icon": "fa-heart"
},
"icon-unchecked": {
"style": "fal",
"icon": "fa-heart"
}
}
}
},
{
"text": "And a third USP for UHasselt",
"iconBefore": {
"style": "fas",
"icon": "fa-caret-right"
},
"toggle": {
"id": "replace-id-with-backend-3",
"name": "replace-name-with-backend-3",
"value": "replace-value-with-backend-3",
"icon": {
"icon-checked": {
"style": "fas",
"icon": "fa-heart"
},
"icon-unchecked": {
"style": "fal",
"icon": "fa-heart"
}
}
}
},
{
"text": "And a third USP for UHasselt",
"iconBefore": {
"style": "fas",
"icon": "fa-caret-right"
},
"toggle": {
"id": "replace-id-with-backend-4",
"name": "replace-name-with-backend-4",
"value": "replace-value-with-backend-4",
"icon": {
"icon-checked": {
"style": "fas",
"icon": "fa-heart"
},
"icon-unchecked": {
"style": "fal",
"icon": "fa-heart"
}
}
}
}
],
"cta": false
}
/* Link List Gray */
{
"modifier": "gray",
"border": false,
"heading": {
"tag": "h3",
"text": "Lorem ipsum dolor sit amet",
"modifier": "title"
},
"icon": false,
"toggleIcon": false,
"whiteArrow": true,
"multiple-cols": false,
"tag": false,
"link": false,
"items": [
{
"text": "A USP for UHasselt",
"href": "#",
"iconBefore": {
"style": "fas",
"icon": "fa-caret-right"
},
"toggle": {
"id": "replace-id-with-backend-1",
"name": "replace-name-with-backend-1",
"value": "replace-value-with-backend-1",
"icon": {
"icon-checked": {
"style": "fas",
"icon": "fa-heart"
},
"icon-unchecked": {
"style": "fal",
"icon": "fa-heart"
}
}
}
},
{
"text": "Another USP for UHasselt",
"iconBefore": {
"style": "fas",
"icon": "fa-caret-right"
},
"toggle": {
"id": "replace-id-with-backend-2",
"name": "replace-name-with-backend-2",
"value": "replace-value-with-backend-2",
"icon": {
"icon-checked": {
"style": "fas",
"icon": "fa-heart"
},
"icon-unchecked": {
"style": "fal",
"icon": "fa-heart"
}
}
}
},
{
"text": "And a third USP for UHasselt",
"iconBefore": {
"style": "fas",
"icon": "fa-caret-right"
},
"toggle": {
"id": "replace-id-with-backend-3",
"name": "replace-name-with-backend-3",
"value": "replace-value-with-backend-3",
"icon": {
"icon-checked": {
"style": "fas",
"icon": "fa-heart"
},
"icon-unchecked": {
"style": "fal",
"icon": "fa-heart"
}
}
}
},
{
"text": "And a third USP for UHasselt",
"iconBefore": {
"style": "fas",
"icon": "fa-caret-right"
},
"toggle": {
"id": "replace-id-with-backend-4",
"name": "replace-name-with-backend-4",
"value": "replace-value-with-backend-4",
"icon": {
"icon-checked": {
"style": "fas",
"icon": "fa-heart"
},
"icon-unchecked": {
"style": "fal",
"icon": "fa-heart"
}
}
}
}
],
"cta": true
}
/* Link List White */
{
"modifier": "white",
"border": false,
"heading": false,
"icon": false,
"toggleIcon": false,
"whiteArrow": true,
"multiple-cols": false,
"tag": false,
"link": false,
"items": [
{
"text": "A USP for UHasselt",
"href": "#",
"iconBefore": {
"style": "fas",
"icon": "fa-caret-right"
},
"toggle": {
"id": "replace-id-with-backend-1",
"name": "replace-name-with-backend-1",
"value": "replace-value-with-backend-1",
"icon": {
"icon-checked": {
"style": "fas",
"icon": "fa-heart"
},
"icon-unchecked": {
"style": "fal",
"icon": "fa-heart"
}
}
}
},
{
"text": "Another USP for UHasselt",
"iconBefore": {
"style": "fas",
"icon": "fa-caret-right"
},
"toggle": {
"id": "replace-id-with-backend-2",
"name": "replace-name-with-backend-2",
"value": "replace-value-with-backend-2",
"icon": {
"icon-checked": {
"style": "fas",
"icon": "fa-heart"
},
"icon-unchecked": {
"style": "fal",
"icon": "fa-heart"
}
}
}
},
{
"text": "And a third USP for UHasselt",
"iconBefore": {
"style": "fas",
"icon": "fa-caret-right"
},
"toggle": {
"id": "replace-id-with-backend-3",
"name": "replace-name-with-backend-3",
"value": "replace-value-with-backend-3",
"icon": {
"icon-checked": {
"style": "fas",
"icon": "fa-heart"
},
"icon-unchecked": {
"style": "fal",
"icon": "fa-heart"
}
}
}
},
{
"text": "And a third USP for UHasselt",
"iconBefore": {
"style": "fas",
"icon": "fa-caret-right"
},
"toggle": {
"id": "replace-id-with-backend-4",
"name": "replace-name-with-backend-4",
"value": "replace-value-with-backend-4",
"icon": {
"icon-checked": {
"style": "fas",
"icon": "fa-heart"
},
"icon-unchecked": {
"style": "fal",
"icon": "fa-heart"
}
}
}
}
],
"cta": true
}
/* Link List White Red */
{
"modifier": "white-red",
"border": true,
"heading": {
"tag": "h3",
"text": "Lorem ipsum dolor sit amet",
"modifier": "title"
},
"icon": {
"style": "far",
"icon": "fa-graduation-cap"
},
"toggleIcon": false,
"whiteArrow": true,
"multiple-cols": false,
"tag": false,
"link": false,
"items": [
{
"text": "A USP for UHasselt",
"href": "#",
"iconBefore": {
"style": "fas",
"icon": "fa-caret-right"
},
"toggle": {
"id": "replace-id-with-backend-1",
"name": "replace-name-with-backend-1",
"value": "replace-value-with-backend-1",
"icon": {
"icon-checked": {
"style": "fas",
"icon": "fa-heart"
},
"icon-unchecked": {
"style": "fal",
"icon": "fa-heart"
}
}
}
},
{
"text": "Another USP for UHasselt",
"iconBefore": {
"style": "fas",
"icon": "fa-caret-right"
},
"toggle": {
"id": "replace-id-with-backend-2",
"name": "replace-name-with-backend-2",
"value": "replace-value-with-backend-2",
"icon": {
"icon-checked": {
"style": "fas",
"icon": "fa-heart"
},
"icon-unchecked": {
"style": "fal",
"icon": "fa-heart"
}
}
}
},
{
"text": "And a third USP for UHasselt",
"iconBefore": {
"style": "fas",
"icon": "fa-caret-right"
},
"toggle": {
"id": "replace-id-with-backend-3",
"name": "replace-name-with-backend-3",
"value": "replace-value-with-backend-3",
"icon": {
"icon-checked": {
"style": "fas",
"icon": "fa-heart"
},
"icon-unchecked": {
"style": "fal",
"icon": "fa-heart"
}
}
}
},
{
"text": "And a third USP for UHasselt",
"iconBefore": {
"style": "fas",
"icon": "fa-caret-right"
},
"toggle": {
"id": "replace-id-with-backend-4",
"name": "replace-name-with-backend-4",
"value": "replace-value-with-backend-4",
"icon": {
"icon-checked": {
"style": "fas",
"icon": "fa-heart"
},
"icon-unchecked": {
"style": "fal",
"icon": "fa-heart"
}
}
}
}
],
"cta": {
"text": "This is a CTA Button",
"id": "",
"icon": {
"style": "fal",
"icon": "fa-user-graduate"
},
"modifier": "red"
}
}
/* Link List White Red No Button */
{
"modifier": "transparent",
"border": false,
"heading": {
"tag": "h3",
"text": "Lorem ipsum dolor sit amet",
"modifier": "title"
},
"icon": {
"style": "far",
"icon": "fa-graduation-cap"
},
"toggleIcon": false,
"whiteArrow": true,
"multiple-cols": false,
"tag": false,
"link": false,
"items": [
{
"text": "A USP for UHasselt",
"href": "#",
"iconBefore": {
"style": "fas",
"icon": "fa-caret-right"
},
"toggle": {
"id": "replace-id-with-backend-1",
"name": "replace-name-with-backend-1",
"value": "replace-value-with-backend-1",
"icon": {
"icon-checked": {
"style": "fas",
"icon": "fa-heart"
},
"icon-unchecked": {
"style": "fal",
"icon": "fa-heart"
}
}
}
},
{
"text": "Another USP for UHasselt",
"iconBefore": {
"style": "fas",
"icon": "fa-caret-right"
},
"toggle": {
"id": "replace-id-with-backend-2",
"name": "replace-name-with-backend-2",
"value": "replace-value-with-backend-2",
"icon": {
"icon-checked": {
"style": "fas",
"icon": "fa-heart"
},
"icon-unchecked": {
"style": "fal",
"icon": "fa-heart"
}
}
}
},
{
"text": "And a third USP for UHasselt",
"iconBefore": {
"style": "fas",
"icon": "fa-caret-right"
},
"toggle": {
"id": "replace-id-with-backend-3",
"name": "replace-name-with-backend-3",
"value": "replace-value-with-backend-3",
"icon": {
"icon-checked": {
"style": "fas",
"icon": "fa-heart"
},
"icon-unchecked": {
"style": "fal",
"icon": "fa-heart"
}
}
}
},
{
"text": "And a third USP for UHasselt",
"iconBefore": {
"style": "fas",
"icon": "fa-caret-right"
},
"toggle": {
"id": "replace-id-with-backend-4",
"name": "replace-name-with-backend-4",
"value": "replace-value-with-backend-4",
"icon": {
"icon-checked": {
"style": "fas",
"icon": "fa-heart"
},
"icon-unchecked": {
"style": "fal",
"icon": "fa-heart"
}
}
}
}
],
"cta": false
}
/* Link List White No Button */
{
"modifier": "white-red",
"border": true,
"heading": {
"tag": "h3",
"text": "Lorem ipsum dolor sit amet",
"modifier": "title"
},
"icon": false,
"toggleIcon": false,
"whiteArrow": true,
"multiple-cols": false,
"tag": false,
"link": false,
"items": [
{
"text": "A USP for UHasselt",
"href": "#",
"iconBefore": {
"style": "fas",
"icon": "fa-caret-right"
},
"toggle": {
"id": "replace-id-with-backend-1",
"name": "replace-name-with-backend-1",
"value": "replace-value-with-backend-1",
"icon": {
"icon-checked": {
"style": "fas",
"icon": "fa-heart"
},
"icon-unchecked": {
"style": "fal",
"icon": "fa-heart"
}
}
}
},
{
"text": "Another USP for UHasselt",
"iconBefore": {
"style": "fas",
"icon": "fa-caret-right"
},
"toggle": {
"id": "replace-id-with-backend-2",
"name": "replace-name-with-backend-2",
"value": "replace-value-with-backend-2",
"icon": {
"icon-checked": {
"style": "fas",
"icon": "fa-heart"
},
"icon-unchecked": {
"style": "fal",
"icon": "fa-heart"
}
}
}
},
{
"text": "And a third USP for UHasselt",
"iconBefore": {
"style": "fas",
"icon": "fa-caret-right"
},
"toggle": {
"id": "replace-id-with-backend-3",
"name": "replace-name-with-backend-3",
"value": "replace-value-with-backend-3",
"icon": {
"icon-checked": {
"style": "fas",
"icon": "fa-heart"
},
"icon-unchecked": {
"style": "fal",
"icon": "fa-heart"
}
}
}
},
{
"text": "And a third USP for UHasselt",
"iconBefore": {
"style": "fas",
"icon": "fa-caret-right"
},
"toggle": {
"id": "replace-id-with-backend-4",
"name": "replace-name-with-backend-4",
"value": "replace-value-with-backend-4",
"icon": {
"icon-checked": {
"style": "fas",
"icon": "fa-heart"
},
"icon-unchecked": {
"style": "fal",
"icon": "fa-heart"
}
}
}
}
],
"cta": false
}
/* Link List White Tag */
{
"modifier": "white-red",
"border": true,
"heading": {
"tag": "h3",
"text": "Lorem ipsum dolor sit amet",
"modifier": "title"
},
"icon": false,
"toggleIcon": false,
"whiteArrow": true,
"multiple-cols": false,
"tag": true,
"link": true,
"items": [
{
"text": "A USP for UHasselt",
"href": "#",
"iconBefore": {
"style": "fas",
"icon": "fa-caret-right"
},
"toggle": {
"id": "replace-id-with-backend-1",
"name": "replace-name-with-backend-1",
"value": "replace-value-with-backend-1",
"icon": {
"icon-checked": {
"style": "fas",
"icon": "fa-heart"
},
"icon-unchecked": {
"style": "fal",
"icon": "fa-heart"
}
}
}
},
{
"text": "Another USP for UHasselt",
"iconBefore": {
"style": "fas",
"icon": "fa-caret-right"
},
"toggle": {
"id": "replace-id-with-backend-2",
"name": "replace-name-with-backend-2",
"value": "replace-value-with-backend-2",
"icon": {
"icon-checked": {
"style": "fas",
"icon": "fa-heart"
},
"icon-unchecked": {
"style": "fal",
"icon": "fa-heart"
}
}
}
},
{
"text": "And a third USP for UHasselt",
"iconBefore": {
"style": "fas",
"icon": "fa-caret-right"
},
"toggle": {
"id": "replace-id-with-backend-3",
"name": "replace-name-with-backend-3",
"value": "replace-value-with-backend-3",
"icon": {
"icon-checked": {
"style": "fas",
"icon": "fa-heart"
},
"icon-unchecked": {
"style": "fal",
"icon": "fa-heart"
}
}
}
},
{
"text": "And a third USP for UHasselt",
"iconBefore": {
"style": "fas",
"icon": "fa-caret-right"
},
"toggle": {
"id": "replace-id-with-backend-4",
"name": "replace-name-with-backend-4",
"value": "replace-value-with-backend-4",
"icon": {
"icon-checked": {
"style": "fas",
"icon": "fa-heart"
},
"icon-unchecked": {
"style": "fal",
"icon": "fa-heart"
}
}
}
}
],
"cta": false
}
.link-list {
@apply p-8 relative;
.link-list-ul {
column-count: 1;
@screen sm {
column-count: 2;
}
}
.link-list-li {
margin: 8px 0;
}
.link-list-li-icon {
margin: 0;
display: flex;
align-items: center;
}
.link-list-header {
display: flex;
align-items: center;
margin-bottom: 1.5rem;
.link-list-header-icon {
@apply text-red;
margin-right: 10px;
}
.heading {
@apply text-black;
margin: 0;
}
}
.link-list-icon-header {
display: flex;
}
.header-tag {
display: flex;
align-items: start;
flex-direction: column;
.link-list-header-tag {
flex-shrink: 0;
margin-left: 0px;
margin-top: 8px;
}
@screen sm {
align-items: start;
flex-direction: row;
.link-list-header-tag {
margin-left: 8px;
margin-top: 0px;
}
}
}
&.transparent {
@apply p-0 text-black;
a {
@apply text-black;
}
}
&.red {
@apply bg-red text-white;
.heading {
@apply text-white;
}
a,
.icon {
@apply text-white;
}
&:before {
content: '';
@apply w-0 h-0 absolute;
top: -17px;
left: 32px;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
border-bottom: 18px solid #e03131;
}
}
&.red-simple {
@apply bg-red text-white;
.heading {
@apply text-white;
}
a,
.icon {
@apply text-white;
}
}
&.gray {
@apply bg-gray text-black;
a {
@apply text-black;
}
}
&.white {
@apply bg-white text-black shadow-xl;
a {
@apply text-black;
}
}
&.white-red {
@apply bg-white text-black shadow-xl;
a {
@apply text-black;
}
}
.title {
@apply font-semibold mb-6;
}
li {
.link {
.icon {
@apply no-underline hover:no-underline;
}
.icon + .text {
@apply ml-4;
}
}
}
.link-bottom-line {
border-bottom: 0.1rem solid #e3e3e3;
}
.button {
@apply mt-2;
}
.button-link-margin {
@apply mt-4;
}
.link-list-bottom-link {
a {
@apply text-red;
}
}
}
@screen md {
.link-list-header-icon {
font-size: 24px;
}
}
No notes defined.