<div class='nav-list subnav-cols'>
<ul class='subnav-items subnav-items-favo'>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
</ul>
</div>
<div class='nav-list {{#unless link}}subnav-cols{{/unless}}'>
<ul class='subnav-items {{#unless nav-list-var}}subnav-items-favo{{/unless}}'>
{{#if nav-list-var}}
{{#each items}}
{{render '@nav-list-item'}}
{{/each}}
{{else}}
{{#each items}}
{{render '@link-list--link-list-transparent-icons-single'}}
{{/each}}
{{/if}}
</ul>
{{#if footerLink}}
<div class='subnav-footer'>
{{render '@link' footerLink}}
</div>
{{/if}}
</div>
{
"modifier": "",
"cols": 4,
"link": false,
"items": [
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{}
],
"footerLink": false,
"nav-list-var": false
}
.nav-list {
@apply z-10 left-0 min-w-max pointer-events-none bg-white;
top: 30px;
display: block;
opacity: 1;
.subnav-items {
.subnav-item {
@apply hover:bg-red hover:text-white;
max-width: 240px;
> a {
@apply block hover:bg-red hover:text-white;
font-size: 1.125rem;
line-height: 1.875rem;
.icon {
@apply mr-2;
}
}
}
}
.subnav-footer {
@apply bg-gray-400;
padding: 12px 24px;
}
&.subnav-cols {
width: 100%;
.subnav-items {
width: 100%;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 0 50px;
@screen 2xl {
width: 100%;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 0 50px;
}
}
.subnav-items-favo {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
@screen xl {
width: 100%;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 0 50px;
}
}
}
}
No notes defined.