<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='py-12 bg-white intranet-agenda-detail'>
<div class='uhasselt-container'>
<div class='mb-4'>
<div class='paragraph paragraph-intro'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non leo vel massa iaculis euismod sit amet eget nibh. Nulla faucibus diam dolor, vel auctor sapien fermentum sed. Phasellus non dolor vel quam tristique consequat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec posuere lobortis nibh, eget iaculis risus. In eu risus sem. Fusce lacinia gravida tortor. Quisque sed ipsum risus. Nam pellentesque consequat consequat. Curabitur imperdiet ac nibh vel ullamcorper. Etiam bibendum pharetra ultrices. Duis consequat odio vitae vehicula dignissim.</div>
<div class="mt-8 flex">
<div class='paragraph '>Pellentesque dignissim, magna maximus pulvinar dignissim, magna dui semper purus, ac laoreet ex tellus sit amet sapien. Morbi eu lobortis justo. Cras tristique ut libero vel fermentum. Fusce neque quam, bibendum non malesuada nec, interdum vel turpis. Aenean interdum pulvinar enim ac convallis. Pellentesque rhoncus est a purus semper auctor. Integer faucibus tristique suscipit. Suspendisse eleifend diam ac tellus condimentum lobortis. Aenean sit amet luctus sem. Donec quis justo sem. <br> Donec diam nibh, finibus non volutpat at, lacinia non ipsum. Mauris sem massa, dignissim in tristique at, pharetra ac urna. Donec diam tellus, faucibus quis venenatis malesuada, pretium non urna. Sed et condimentum enim. Morbi vehicula accumsan enim. Praesent eget mattis odio. Nunc eu augue condimentum elit porta bibendum.</div>
<picture class="picture ">
<source srcset="https://picsum.photos/id/239/400/250" media="(min-width: 1024px)">
<source srcset="https://picsum.photos/id/239/150/150" media="(min-width: 640px)">
<img class="picture-image " src="https://picsum.photos/id/239/200/150" alt="The quick brown fox jumps over the lazy dog" loading="lazy">
</picture>
</div>
</div>
<div class="flex items-center">
<div class="mr-4 text-red">
<span class="icon fas fa-long-arrow-left " aria-hidden="true"></span>
</div>
<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>
</section>
<section class='py-12 bg-gray-300 intranet-agenda-detail'>
<div class='uhasselt-container'>
<div class='mb-4'>
<div class='paragraph paragraph-intro'>Dit kan je ook interesseren...</div>
<div class="my-8 grid gap-4 xl:grid-cols-4 lg:grid-cols-3 md:grid-cols-2 grid-cols-1">
<div class="bg-white p-4">
<div class="card-list list-vertical card-list-no-border">
<div class="card-list-item js--clickable">
<div class="wrapper-vertical">
<div>
<div class="date-block date-block-horizontal">
<div>10 nov</div>
</div>
</div>
<div class="information">
<h3 class="heading title">
Lorem ipsum dolor sit amet
</h3>
<span><span class="icon fal fa-clock fa-fw" aria-hidden="true"></span> 14:00 uur - 19.00 uur</span>
<span><span class="icon fal fa-map-marker-alt fa-fw" aria-hidden="true"></span> Campus Diepenbeek - gebouw D</span>
</div>
</div>
<a href="#" class="link " aria-label="" title="This is what a link looks like">
<span class="text">Bekijk de volledige agenda</span>
</a>
</div>
</div>
</div>
<div class="bg-white p-4">
<div class="card-list list-vertical card-list-no-border">
<div class="card-list-item js--clickable">
<div class="wrapper-vertical">
<div>
<div class="date-block date-block-horizontal">
<div>10 nov</div>
</div>
</div>
<div class="information">
<h3 class="heading title">
Lorem ipsum dolor sit amet
</h3>
<span><span class="icon fal fa-clock fa-fw" aria-hidden="true"></span> 14:00 uur - 19.00 uur</span>
<span><span class="icon fal fa-map-marker-alt fa-fw" aria-hidden="true"></span> Campus Diepenbeek - gebouw D</span>
</div>
</div>
<a href="#" class="link " aria-label="" title="This is what a link looks like">
<span class="text">Bekijk de volledige agenda</span>
</a>
</div>
</div>
</div>
<div class="bg-white p-4">
<div class="card-list list-vertical card-list-no-border">
<div class="card-list-item js--clickable">
<div class="wrapper-vertical">
<div>
<div class="date-block date-block-horizontal">
<div>10 nov</div>
</div>
</div>
<div class="information">
<h3 class="heading title">
Lorem ipsum dolor sit amet
</h3>
<span><span class="icon fal fa-clock fa-fw" aria-hidden="true"></span> 14:00 uur - 19.00 uur</span>
<span><span class="icon fal fa-map-marker-alt fa-fw" aria-hidden="true"></span> Campus Diepenbeek - gebouw D</span>
</div>
</div>
<a href="#" class="link " aria-label="" title="This is what a link looks like">
<span class="text">Bekijk de volledige agenda</span>
</a>
</div>
</div>
</div>
<div class="bg-white p-4">
<div class="card-list list-vertical card-list-no-border">
<div class="card-list-item js--clickable">
<div class="wrapper-vertical">
<div>
<div class="date-block date-block-horizontal">
<div>10 nov</div>
</div>
</div>
<div class="information">
<h3 class="heading title">
Lorem ipsum dolor sit amet
</h3>
<span><span class="icon fal fa-clock fa-fw" aria-hidden="true"></span> 14:00 uur - 19.00 uur</span>
<span><span class="icon fal fa-map-marker-alt fa-fw" aria-hidden="true"></span> Campus Diepenbeek - gebouw D</span>
</div>
</div>
<a href="#" class="link " aria-label="" title="This is what a link looks like">
<span class="text">Bekijk de volledige agenda</span>
</a>
</div>
</div>
</div>
<div class="bg-white p-4">
<div class="card-list list-vertical card-list-no-border">
<div class="card-list-item js--clickable">
<div class="wrapper-vertical">
<div>
<div class="date-block date-block-horizontal">
<div>10 nov</div>
</div>
</div>
<div class="information">
<h3 class="heading title">
Lorem ipsum dolor sit amet
</h3>
<span><span class="icon fal fa-clock fa-fw" aria-hidden="true"></span> 14:00 uur - 19.00 uur</span>
<span><span class="icon fal fa-map-marker-alt fa-fw" aria-hidden="true"></span> Campus Diepenbeek - gebouw D</span>
</div>
</div>
<a href="#" class="link " aria-label="" title="This is what a link looks like">
<span class="text">Bekijk de volledige agenda</span>
</a>
</div>
</div>
</div>
<div class="bg-white p-4">
<div class="card-list list-vertical card-list-no-border">
<div class="card-list-item js--clickable">
<div class="wrapper-vertical">
<div>
<div class="date-block date-block-horizontal">
<div>10 nov</div>
</div>
</div>
<div class="information">
<h3 class="heading title">
Lorem ipsum dolor sit amet
</h3>
<span><span class="icon fal fa-clock fa-fw" aria-hidden="true"></span> 14:00 uur - 19.00 uur</span>
<span><span class="icon fal fa-map-marker-alt fa-fw" aria-hidden="true"></span> Campus Diepenbeek - gebouw D</span>
</div>
</div>
<a href="#" class="link " aria-label="" title="This is what a link looks like">
<span class="text">Bekijk de volledige agenda</span>
</a>
</div>
</div>
</div>
</div>
</div>
<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>
</section>
{{render '@content-header--content-header-intranet-white-noimg-info' this.content-header}}
<section class='py-12 bg-white intranet-agenda-detail'>
<div class='uhasselt-container'>
<div class='mb-4'>
{{render '@paragraph--intro' this.paragraph-intro}}
<div class="mt-8 flex">
{{render '@paragraph' this.paragraph}}
{{render '@image' this.image}}
</div>
</div>
<div class="flex items-center">
<div class="mr-4 text-red">
{{render '@icon' this.icon}}
</div>
{{render '@link'}}
</div>
</div>
</section>
<section class='py-12 bg-gray-300 intranet-agenda-detail'>
<div class='uhasselt-container'>
<div class='mb-4'>
{{render '@paragraph--intro' this.paragraph-intro-second}}
<div class="my-8 grid gap-4 xl:grid-cols-4 lg:grid-cols-3 md:grid-cols-2 grid-cols-1">
{{#each cardlists as |cardlist|}}
<div class="bg-white p-4">
{{render '@card-list--card-list-no-border'}}
</div>
{{/each}}
</div>
</div>
{{render '@link'}}
</div>
</section>
{
"content-header": {
"modifier": "",
"image": false,
"paragraph": false,
"toggle-btn": true,
"information": true,
"intranet-header": true,
"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
}
},
"paragraph": {
"text": "Pellentesque dignissim, magna maximus pulvinar dignissim, magna dui semper purus, ac laoreet ex tellus sit amet sapien. Morbi eu lobortis justo. Cras tristique ut libero vel fermentum. Fusce neque quam, bibendum non malesuada nec, interdum vel turpis. Aenean interdum pulvinar enim ac convallis. Pellentesque rhoncus est a purus semper auctor. Integer faucibus tristique suscipit. Suspendisse eleifend diam ac tellus condimentum lobortis. Aenean sit amet luctus sem. Donec quis justo sem. <br> Donec diam nibh, finibus non volutpat at, lacinia non ipsum. Mauris sem massa, dignissim in tristique at, pharetra ac urna. Donec diam tellus, faucibus quis venenatis malesuada, pretium non urna. Sed et condimentum enim. Morbi vehicula accumsan enim. Praesent eget mattis odio. Nunc eu augue condimentum elit porta bibendum.",
"modifier": "",
"isRichText": true
},
"paragraph-intro": {
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non leo vel massa iaculis euismod sit amet eget nibh. Nulla faucibus diam dolor, vel auctor sapien fermentum sed. Phasellus non dolor vel quam tristique consequat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec posuere lobortis nibh, eget iaculis risus. In eu risus sem. Fusce lacinia gravida tortor. Quisque sed ipsum risus. Nam pellentesque consequat consequat. Curabitur imperdiet ac nibh vel ullamcorper. Etiam bibendum pharetra ultrices. Duis consequat odio vitae vehicula dignissim.",
"modifier": "paragraph-intro",
"isRichText": true
},
"paragraph-intro-second": {
"text": "Dit kan je ook interesseren...",
"modifier": "paragraph-intro",
"isRichText": true
},
"events": [
{},
{},
{},
{},
{},
{}
],
"image": {
"modifier": "",
"imageModifier": "",
"lazy": true,
"alt": "The quick brown fox jumps over the lazy dog",
"src": "https://picsum.photos/id/239/200/150",
"sources": [
{
"mediaQuery": "(min-width: 1024px)",
"src": "https://picsum.photos/id/239/400/250"
},
{
"mediaQuery": "(min-width: 640px)",
"src": "https://picsum.photos/id/239/150/150"
}
]
},
"icon": {
"icon": "fa-long-arrow-left",
"style": "fas",
"modifier": ""
},
"cardlists": [
{},
{},
{},
{},
{},
{}
]
}
.intranet-agenda-detail {
.picture-image {
margin-left: 40px;
max-width: unset;
}
}
No notes defined.