<section class='content-block block-right'>
<div class='uhasselt-container'>
<div class='left'>
<picture class="picture ">
<img class="picture-image " src="https://picsum.photos/id/239/1500/1500" alt="Test" loading="lazy">
</picture>
</div>
<div class='right'>
<div class='wrapper'>
<div class='head-white'>
<h2 class="heading ">
The quick brown fox jumps over the lazy dog
</h2>
</div>
<div class='paragraph paragraph-white'>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sollicitudin mauris vel nisi condimentum accumsan. Phasellus eget est condimentum erat fringilla congue. <a href="/">Duis malesuada justo<i class="far fa-external-link"></i></a> ut tincidunt tincidunt. Vestibulum in felis quam. In <strong>varius</strong> ligula vel ultricies consequat. Cras fringilla blandit purus nec <a href='javascript:(void);'>fermentum</a>. Vivamus tristique ac mi a <i>pulvinar</i>. Quisque non ipsum tortor. Nunc nec odio non tellus malesuada molestie id sed ipsum. Curabitur risus ex, <a href="/some/file" download="download">aliquet</a> sed orci a, sagittis finibus sem. Ut bibendum purus id sodales scelerisque.</p>
</div>
</div>
</div>
</div>
</section>
<section class='content-block {{modifier}}'>
<div class='uhasselt-container'>
{{#if isFull}}
<div class='full'>
{{render '@image' imgfull}}
</div>
{{else}}
<div class='left'>
{{render '@image' imgside}}
</div>
{{/if}}
<div class='right'>
<div class='wrapper'>
{{#if bg-color}}
<div class='head-red'>
{{render '@heading--h2'}}
</div>
{{else}}
<div class='head-white'>
{{render '@heading--h2'}}
</div>
{{/if}}
{{#if bg-color}}
{{render '@paragraph' paragraph}}
{{else}}
{{render '@paragraph' paragraph}}
{{/if}}
</div>
</div>
</div>
</section>
{
"modifier": "block-right",
"bg-color": "",
"isFull": false,
"imgside": {
"modifier": "",
"imageModifier": "",
"lazy": true,
"alt": "Test",
"src": "https://picsum.photos/id/239/1500/1500"
},
"imgfull": {
"modifier": "",
"imageModifier": "",
"lazy": true,
"alt": "Test",
"src": "https://picsum.photos/id/239/1500/1500"
},
"paragraph": {
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sollicitudin mauris vel nisi condimentum accumsan. Phasellus eget est condimentum erat fringilla congue. <a href=\"/\">Duis malesuada justo<i class=\"far fa-external-link\"></i></a> ut tincidunt tincidunt. Vestibulum in felis quam. In <strong>varius</strong> ligula vel ultricies consequat. Cras fringilla blandit purus nec <a href='javascript:(void);'>fermentum</a>. Vivamus tristique ac mi a <i>pulvinar</i>. Quisque non ipsum tortor. Nunc nec odio non tellus malesuada molestie id sed ipsum. Curabitur risus ex, <a href=\"/some/file\" download=\"download\">aliquet</a> sed orci a, sagittis finibus sem. Ut bibendum purus id sodales scelerisque.",
"modifier": "paragraph-white"
}
}
.content-block {
@apply mb-16;
.uhasselt-container {
@apply flex;
@apply justify-center;
}
.heading {
@apply m-0;
@apply pl-8 pt-8 md:pt-0 md:pb-8 pr-8;
}
&.block-full {
.uhasselt-container {
@apply flex-col;
}
.picture {
max-height: 450px;
img {
@apply w-full;
max-height: 450px;
object-fit: cover;
}
}
.right {
@apply md:-mt-24;
@apply md:mr-24;
@apply md:ml-24;
.wrapper {
@apply shadow-2xl;
.heading {
@apply pt-8 pb-0;
}
.head-red {
@apply bg-red;
@apply text-white;
.heading.text-red {
@apply text-white;
}
}
.head-white {
@apply bg-white;
}
.usp-list {
@apply shadow-none;
}
.paragraph-red {
@apply bg-red;
@apply text-white;
@apply p-8 pt-4;
a {
@apply text-white;
}
}
.paragraph-white {
@apply bg-white;
@apply p-8 pt-4;
}
}
}
}
&.block-right,
&.block-left {
.uhasselt-container {
@apply flex-col md:flex-row;
}
.picture {
max-height: 410px;
max-width: 768px;
@apply relative;
@apply z-10;
img {
@apply w-full;
max-height: 410px;
object-fit: cover;
}
}
.left {
@apply relative;
@apply z-10;
@screen md {
&::after {
@apply block absolute;
@apply -bottom-14 left-1/4;
z-index: 0;
content: url(/assets/img/down-arrow-small.svg);
width: 18px;
height: 126px;
}
}
}
.right {
@apply md:mt-8 lg:mt-24;
@apply md:w-4/5 lg:w-1/2;
@apply z-10;
.usp-list {
@apply md:-ml-64;
}
.head-red {
@apply bg-red md:bg-transparent;
@apply text-white md:text-black;
}
.head-white {
@apply bg-white md:bg-transparent;
}
.paragraph-red {
@apply bg-red;
@apply text-white;
@apply p-8;
@apply md:-ml-64;
@apply shadow-xl;
a {
@apply text-white underline;
}
}
.paragraph-white {
@apply bg-white;
@apply md:-ml-64;
@apply p-8;
@apply shadow-xl;
}
}
}
&.block-right {
.uhasselt-container {
@apply md:flex-row-reverse;
}
.right .paragraph-white,
.right .paragraph-red {
@apply md:-mr-64;
@apply md:ml-0;
}
.left {
@screen md {
&::after {
@apply left-auto;
@apply right-1/4;
}
}
}
}
}
No notes defined.