<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>
<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>
{
"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 {
@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.