<form class="newsletter ">
<h3 class="newsletter__heading ">
Nieuwsbrief
</h3>
<div class="newsletter__controls">
<div class="input newsletter__input input--button">
<span class="form-check" aria-label="form-check-newsletterEmail">
<svg class="icon " role="img">
<title>Angle down icon</title>
<use xlink:href="/images/icons-sprite.svg#angle-down"></use>
</svg>
</span>
<label class="
label
label--hidden
newsletter__label
" for="newsletterEmail">
E-mailadres
</label>
<input class="input__field newsletter__field" id="newsletterEmail" name="newsletterEamil" type="" placeholder="E-mailadres">
</div>
<button class="button button--in-input button--icon" type="button" aria-label="Submit">
<svg class="icon " role="img">
<title>Arrow right</title>
<use xlink:href="/images/icons-sprite.svg#angle-right"></use>
</svg>
</button>
</div>
</form>
<form class="newsletter {{ class }}">
<h3 class="newsletter__heading {{ heading.class }}">
{{ heading.text }}
</h3>
<div class="newsletter__controls">
{{ render '@input' input }}
{{ render '@button' newsletterButton }}
</div>
</form>
{
"heading": {
"text": "Nieuwsbrief"
},
"input": {
"class": "newsletter__input input--button",
"field": {
"placeholder": "E-mailadres",
"id": "newsletterEmail",
"name": "newsletterEamil",
"class": "newsletter__field"
},
"label": {
"class": "newsletter__label",
"hidden": true,
"text": "E-mailadres"
}
},
"newsletterButton": {
"tag": "button",
"class": "button--in-input button--icon",
"icon": {
"id": "angle-right",
"title": "Arrow right"
},
"attributes": "type=\"button\" aria-label=\"Submit\""
}
}
.newsletter {
margin-top: $spacer--2;
@include mq($screen-m) {
margin: 0;
}
&__controls {
position: relative;
height: auto;
width: 271px;
margin-left: 0.5rem;
@include mq($screen-m) {
margin: 0;
}
}
&__button {
position: absolute;
top: 0;
right: 0;
padding: 0;
&:hover {
cursor: pointer;
outline: none;
}
&:focus {
@include focus("dark");
}
}
&__input {
margin: 0;
box-sizing: border-box;
background: rgba(255, 255, 255, 0.5);
border: 0.75px solid rgba(117, 117, 117, 0.25);
border-radius: 4px;
}
&__label {
@include visually-hidden;
}
&__field {
&:focus {
@include focus-input("dark");
}
}
}
There are no notes for this item.