<section class="content-header ">
<div class="uhasselt-container">
<div class="column ">
<nav class="mol-breadcrumbs">
<ol>
<li>
<a class="link " aria-label="" title="">
<span class="text">Home</span>
</a>
<span class="icon fal fa-slash fa-sm " aria-hidden="true"></span>
</li>
<li>
<a class="link " aria-label="" title="">
<span class="text">Level 1</span>
</a>
<span class="icon fal fa-slash fa-sm " aria-hidden="true"></span>
</li>
<li>
<a class="link " aria-label="" title="">
<span class="text">Level 2</span>
</a>
<span class="icon fal fa-slash fa-sm " aria-hidden="true"></span>
</li>
<li>
Current page
</li>
</ol>
</nav>
<h1 class="heading ">
The quick brown fox jumps over the lazy dog
</h1>
<div class="information">
<span class="info-icon"><span class="icon fal fa-calendar-alt fa-fw" aria-hidden="true"></span> 9 september 2020</span>
<span class="info-icon"><span class="icon fal fa-clock fa-fw" aria-hidden="true"></span> 14:00 uur - 19.00 uur</span>
<span class="info-icon"><span class="icon fal fa-map-marker-alt fa-fw" aria-hidden="true"></span> Campus Diepenbeek - gebouw D</span>
</div>
<div class="toggle-button-wrap">
<div class="button-wrap-button">
<div class='toggle-button'>
<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>
<span class="label-text">Toegevoegd aan favorieten</span>
</label>
<label for='replace-id-with-backend-2' class='icon-unchecked'>
<span class="icon fal fa-heart " aria-hidden="true"></span>
<span class="label-text">Voeg toe aan favorieten</span>
</label>
</div>
</div>
<div class="button-wrap-button">
<div class='toggle-button'>
<input class='item-toggle-input' type='checkbox' id='replace-id-with-backend-12' name='replace-name-with-backend-12' value='replace-value-with-backend-12' />
<label for='replace-id-with-backend-12' class='icon-checked'>
<span class="icon fas fa-bell " aria-hidden="true"></span>
<span class="label-text">Op de hoogte</span>
</label>
<label for='replace-id-with-backend-12' class='icon-unchecked'>
<span class="icon fal fa-bell " aria-hidden="true"></span>
<span class="label-text">Blijf op de hoogte</span>
</label>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="content-header {{modifier}} {{#if image}}hasimage{{/if}} {{#if extra-padding}}content-header-extra-padding{{/if}}">
<div class="uhasselt-container">
<div class="column {{#if image}}has-image{{/if}}">
{{render '@breadcrumbs'}}
{{#if tag}}
<div class="uhasselt-container-tags">
{{#each tagsList}}
<div class="uhasselt-container-tag">{{render '@tag--tag-red-outline-sm' }}</div>
{{/each}}
</div>
{{/if}}
{{render '@heading'}}
{{#if paragraph}}
{{render '@paragraph--intro'}}
{{/if}}
{{#if information}}
<div class="information">
{{#if date}}<span class="info-icon">{{ render '@icon' date.icon }} {{ date.text }}</span>{{/if}}
{{#if time}}<span class="info-icon">{{ render '@icon' time.icon }} {{ time.text }}</span>{{/if}}
{{#if location}}<span class="info-icon">{{ render '@icon' location.icon }} {{ location.text }}</span>{{/if}}
</div>
{{/if}}
{{#if intranet-header}}
<div class="toggle-button-wrap">
{{#if toggle-btn}}
<div class="button-wrap-button">
{{render '@toggle-button--toggle-unchecked-text'}}
</div>
<div class="button-wrap-button">
{{render '@toggle-button--toggle-unchecked-text' this.button}}
</div>
{{/if}}
{{#if like}}
{{render '@item-toggle--toggle-unchecked-text'}}
{{/if}}
</div>
{{else}}
<div class="button-wrap">
{{#if btn-black}}{{render '@button'}}{{/if}}
{{#if btn-red}}{{render '@button--red'}}{{/if}}
{{#if btn-white}}{{render '@button--white'}}{{/if}}
{{#if scnd-btn-white}}{{render '@button--white'}}{{/if}}
{{#if btn-white-border}}{{render '@button--white-border'}}{{/if}}
{{#if like}}{{render '@item-toggle--toggle-unchecked-text'}}{{/if}}
</div>
{{/if}}
</div>
</div>
{{#if image}}
<div class="wrap-image">
{{render '@image' image}}
<span class="triangle1"></span>
</div>
{{/if}}
</section>
{
"image": false,
"extra-padding": false,
"time": {
"icon": {
"style": "fal",
"modifier": "fa-fw",
"icon": "fa-clock"
},
"text": "14:00 uur - 19.00 uur"
},
"date": {
"icon": {
"style": "fal",
"modifier": "fa-fw",
"icon": "fa-calendar-alt"
},
"text": "9 september 2020"
},
"location": {
"icon": {
"style": "fal",
"modifier": "fa-fw",
"icon": "fa-map-marker-alt"
},
"text": "Campus Diepenbeek - gebouw D"
},
"button": {
"id": "replace-id-with-backend-12",
"name": "replace-name-with-backend-12",
"value": "replace-value-with-backend-12",
"active-text": "Blijf op de hoogte",
"text": "Op de hoogte",
"icon": {
"icon-checked": {
"style": "fas",
"icon": "fa-bell"
},
"icon-unchecked": {
"style": "fal",
"icon": "fa-bell"
}
},
"checked": false,
"disabled": false
},
"like": false,
"tag": false,
"modifier": "",
"email-text": "Vul je e-mailadres in",
"tagsList": [
{
"text": "A tag for UHasselt"
},
{
"text": "Another tag for UHasselt"
},
{
"text": "Another tag for UHasselt"
},
{
"text": "Another tag for UHasselt"
},
{
"text": "Another tag for UHasselt"
},
{
"text": "Another tag for UHasselt"
},
{
"text": "Another tag for UHasselt"
}
],
"paragraph": false,
"toggle-btn": true,
"information": true,
"intranet-header": true
}
.content-header {
@apply lg:relative sm:grid lg:block sm:grid-flow-row lg:grid-rows-none bg-white;
&.hasimage {
@screen lg {
min-height: 384px;
}
}
.uhasselt-container-tags {
margin-bottom: 16px;
display: flex;
align-items: center;
flex-wrap: wrap;
}
.uhasselt-container-tag {
margin-right: 12px;
margin-bottom: 8px;
}
.mobile-image {
@apply lg:hidden;
img {
@apply w-full;
}
}
.desktop-image {
@apply hidden;
@apply lg:block;
}
.wrap-image {
@apply w-full lg:w-1/2 lg:absolute lg:right-0 lg:top-0 lg:bottom-0;
@screen lg {
min-height: 384px;
}
&:before {
content: url(/assets/img/square-dots.svg);
@apply hidden lg:block absolute top-16 left-2;
width: 157px;
height: 131px;
}
&::after {
@apply absolute hidden lg:block;
content: url(/assets/img/down-arrow-small.svg);
width: 18px;
height: 126px;
right: 30%;
bottom: 50px;
transform: translateY(calc(100% - 20px));
}
.triangle1 {
background-image: url(/assets/img/triangle-big.svg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
@apply hidden lg:block absolute top-64 left-16;
width: 66px;
height: 66px;
}
.triangle2 {
background-image: url(/assets/img/triangle-big.svg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
@apply hidden lg:block absolute top-16 right-24;
width: 66px;
height: 66px;
}
.picture {
@apply w-auto sm:h-full;
@screen lg {
clip-path: polygon(20% 0, 100% 0, 100% 100%, 0% 100%);
}
img {
@apply w-full;
@apply sm:h-full;
object-fit: cover;
}
}
}
.uhasselt-container {
@apply relative;
&::before {
content: url(/assets/img/triangle-big.svg);
@apply absolute hidden lg:block top-2/4 -left-24;
width: 66px;
height: 66px;
z-index: 10;
}
.column {
@apply py-8 w-full;
.mol-breadcrumbs {
@apply mb-10;
}
.heading {
@apply w-4/5 mb-8 relative;
&:after {
content: url(/assets/img/triangle-big.svg);
@apply hidden md:block absolute -top-6 -right-40;
width: 66px;
height: 66px;
}
}
.paragraph-intro {
@apply mb-10 md:w-4/5;
}
&.has-image {
@screen lg {
width: 45%;
}
.heading {
@apply w-full;
&:after {
@apply hidden;
}
}
.paragraph-intro {
@apply w-full;
}
}
.toggle-button-wrap {
@apply flex flex-wrap lg:mb-0;
.button-wrap-button {
@apply mr-4 mb-4;
}
}
.button-wrap {
@apply flex flex-wrap mb-4 lg:mb-0;
.button {
@apply mr-4;
}
}
}
}
&.red {
@apply bg-red text-white;
.heading.text-red {
@apply text-white;
}
a {
@apply text-white underline;
}
.wrap-image:before {
content: url(/assets/img/square-dots-white.svg);
}
.column {
@apply pt-8;
}
}
}
.content-header-extra-padding {
@screen lg {
padding-bottom: 150px;
}
}
No notes defined.