<section class="newsletter-block red">
<div class="uhasselt-container">
<div class="column has-image">
<h1 class="heading ">
The quick brown fox jumps over the lazy dog
</h1>
<div class="email-wrap">
<div class="usp-list red">
<ul class="fa-ul">
<li><span class="fa-li"><span class="icon fal fa-check " aria-hidden="true"></span></span>2x per maand</li>
<li><span class="fa-li"><span class="icon fal fa-check " aria-hidden="true"></span></span>Altijd op de hoogte van de laatste trends in onderzoek</li>
</ul>
</div>
<span class="text">Vul je e-mailadres in</span>
<span class="atm-form-input ">
<input type="text" name="input" id="input" placeholder="Placeholder" class="form-input" value="">
<span class="icon far fa-times form-input-error-icon" aria-hidden="true"></span>
<span class="icon far fa-check form-input-valid-icon" aria-hidden="true"></span>
</span>
<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 class="wrap-image">
<picture class="picture ">
<source srcset="https://picsum.photos/id/239/150/200" 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>
</section>
<section class="newsletter-block {{modifier}}">
<div class="uhasselt-container">
<div class="column {{#if image}}has-image{{/if}}">
{{render '@heading'}}
{{#if paragraph}}
{{render '@paragraph--intro'}}
{{/if}}
{{#if email}}
<div class="email-wrap">
{{render '@usp-list' usp-list}}
<span class="text">{{email-text}}</span>
{{render '@input'}}
{{render '@button'}}
</div>
{{/if}}
</div>
</div>
{{#if image}}
<div class="wrap-image">
{{render '@image' imageurl}}
</div>
{{/if}}
</section>
{
"image": {
"modifier": "",
"imageModifier": "",
"lazy": true,
"alt": "Test",
"src": "https://picsum.photos/id/239/960/640"
},
"modifier": "red",
"email": true,
"email-text": "Vul je e-mailadres in",
"usp-list": {
"modifier": "red",
"items": [
{
"text": "2x per maand"
},
{
"text": "Altijd op de hoogte van de laatste trends in onderzoek"
}
],
"icon": {
"style": "fal",
"icon": "fa-check"
}
}
}
.newsletter-block
{
@apply lg:relative;
@apply sm:grid;
@apply lg:block;
@apply sm:grid-flow-row;
@apply lg:grid-rows-none;
@apply bg-white;
&:not(.no-margins)
{
@apply mb-16;
}
.wrap-image
{
@apply w-full;
@apply lg:w-1/2;
@apply h-96;
@apply lg:h-auto;
@apply lg:absolute;
@apply lg:right-0;
@apply lg:top-0;
@apply lg:bottom-0;
&:before
{
content: url(/assets/img/square-dots.svg);
@apply hidden lg:block;
@apply absolute;
@apply top-16 left-2;
width: 157px;
height: 131px;
}
&:after
{
content: url(/assets/img/triangle-big.svg);
@apply hidden lg:block;
@apply absolute;
@apply top-64 left-16;
width: 66px;
height: 66px;
}
.picture
{
@apply w-auto;
@apply h-full;
@screen lg
{
clip-path: polygon(20% 0, 100% 0, 100% 100%, 0% 100%);
}
img
{
@apply w-full;
@apply h-full;
object-fit: cover;
}
}
}
.uhasselt-container
{
.column
{
@apply p-8;
@apply w-full;
&.has-image
{
@apply lg:w-1/2;
}
.breadcrumb
{
@apply mb-10;
}
.heading
{
@apply mb-8;
}
.paragraph-intro
{
@apply mb-10;
}
.email-wrap
{
.usp-list
{
@apply p-0;
@apply mb-8;
}
> .text
{
@apply w-full;
@apply block;
@apply text-md;
@apply mb-1;
}
}
}
}
.umbraco-forms-tooltip
{
@apply text-black;
@apply text-sm;
}
&.red
{
@apply bg-red;
@apply text-white;
.heading.text-red
{
@apply text-white;
}
a
{
@apply text-white;
}
label
{
@apply text-white;
}
input[type=text]
{
@apply text-black;
}
input[type=submit]
{
@apply text-white;
}
.wrap-image:before
{
content: url(/assets/img/square-dots-white.svg);
}
.umbraco-forms-tooltip
{
@apply text-black;
@apply text-sm;
}
}
}
No notes defined.