<section class="org-agenda-block">
<div class="uhasselt-container">
<h2 class="heading ">
The quick brown fox jumps over the lazy dog
</h2>
<div class="heading heading-subtitle">
The quick brown fox jumps over the lazy dog
</div>
<div class="wrap-agenda-block">
<div class="column show-arrow">
<div class="card card-no-image">
<div class="card-container js--clickable">
<div class="card-wrapper">
<div class="date-block date-block-vertical">
<div>10 nov</div>
</div>
</div>
<div class="heading-container">
<h2 class="heading title">
Lorem ipsum dolor sit amet
</h2>
</div>
<div class="information">
<div class="info-row">
<div><span class="icon fal fa-clock fa-fw" aria-hidden="true"></span></div>
<span class="text">14:00 uur - 19.00 uur</span>
</div>
<div class="info-row">
<div><span class="icon fal fa-map-marker-alt fa-fw" aria-hidden="true"></span></div>
<span class="text">Campus Diepenbeek - gebouw D</span>
</div>
<div class="info-row">
<div><span class="icon fal fa-phone-alt fa-fw" aria-hidden="true"></span></div>
<span class="text"><a href="tel:003211268173" class="link " aria-label="" title="+32 112 68 173">
<span class="text">+32 112 68 173</span>
</a>
</span>
</div>
</div>
<div class="btn-wrapper"> <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>
</div>
<div class="column">
<div class="card-list list-simple">
<div class="card-list-item js--clickable">
<div class="wrapper">
<div class="information">
<span class="date">9 september 2020</span>
<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 class="card-list list-simple">
<div class="card-list-item js--clickable">
<div class="wrapper">
<div class="information">
<span class="date">9 september 2020</span>
<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 class="card-list list-simple">
<div class="card-list-item js--clickable">
<div class="wrapper">
<div class="information">
<span class="date">9 september 2020</span>
<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>
<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 class="column">
<div class='paragraph '>
<p>Lorem ipsum dolor sit amet, <a href="/">Duis malesuada justo</a> ut tincidunt tincidunt. Vestibulum in felis quam. In <strong>varius</strong> ligula vel ultricies consequat sed orci a, sagittis finibus sem. Ut bibendum purus id sodales scelerisque.</p>
</div>
</div>
</div>
</div>
</section>
<section class="org-agenda-block">
<div class="uhasselt-container">
{{ render '@heading--h2' }}
{{ render '@heading--subtitle' }}
<div class="wrap-agenda-block">
<div class="column show-arrow">
{{ render '@card--card-no-image' }}
</div>
<div class="column">
{{ render '@card-list--list-simple' }}
{{ render '@card-list--list-simple' }}
{{ render '@card-list--list-simple' }}
{{ render '@link' }}
</div>
<div class="column">
{{ render '@paragraph' }}
</div>
</div>
</div>
</section>
/* No context defined. */
.org-agenda-block {
@apply mb-8 md:mb-16;
.heading-subtitle {
@apply mb-8;
}
.wrap-agenda-block {
@apply grid grid-cols-1 lg:grid-flow-col lg:auto-cols-fr gap-8;
.column:last-of-type {
.paragraph {
@apply border-b border-solid border-gray border-t-0 pb-6 md:border-none;
}
}
a.link {
@apply underline;
@apply float-right;
}
}
}
@screen md {
.show-arrow {
.card-no-image {
@apply relative;
&::after {
@apply block absolute;
@apply transform;
@apply left-1/4;
content: url(/assets/img/down-arrow-small.svg);
width: 18px;
height: 126px;
bottom: 0;
transform: translateY(calc(50% + 1px));
clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0% 100%);
}
}
}
}
.agenda-column-block {
a.link {
@apply underline;
}
}
No notes defined.