<div class="content-section content-section--sticky ">
<div class="content-section__title text-button">newsletter</div>
<div class="content-section__content">
<div class="newsletter-module grid grid--no-gutter grid--middle-md grid--center-md">
<div class="newsletter-module__inner grid__col grid__col--md-18 grid__col--lg-12">
<h3 class="newsletter-module__title">Subscribe to our newsletter</h3>
<div class="newsletter-module__text">Stay up to date with new additions and upcoming events</div>
<form class="newsletter newsletter-module__newsletter ">
<div class="newsletter__textfield-container">
<div class="textfield textfield--label-hidden textfield--border-hidden newsletter__textfield">
<div class="textfield__inner">
<input class="textfield__input" type="text" id="moduleEmail" name="textfield" placeholder="Enter your email here">
<label class="textfield__label text-button " for="moduleEmail">
newsletter
</label>
</div>
</div>
<button type="submit" class="button newsletter__button ">
<span class="button__inner" data-text="subscribe">
<span class="button__text">
subscribe
</span>
</span>
</button>
<button type="submit" class="button button--icon newsletter__button newsletter__button--mobile ">
<span class="button__pseudo-icon">
<svg class="icon button__icon">
<use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#arrow-enter-bold"></use>
</svg>
</span>
<span class="button__inner" data-text="">
<span class="button__text">
<svg class="icon button__icon">
<use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#arrow-enter-bold"></use>
</svg>
</span>
</span>
</button>
</div>
<span class="newsletter__error-message"></span>
<div class="newsletter__check-container">
<div class="check newsletter__check">
<input type="checkbox" id="check1" name="check" value="" class="check__input">
<label for="check1" class="check__label">
<span class="check__indicator">
<svg class="icon check__icon">
<use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#checkbox-crossed-big"></use>
</svg>
</span>
<span class="check__text"><span>I agree with <a href="#" class="link">terms and conditions</a></span></span>
</label>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
{% set content %}
<div class="newsletter-module grid grid--no-gutter grid--middle-md grid--center-md">
<div class="newsletter-module__inner grid__col grid__col--md-18 grid__col--lg-12">
{% if data.title %}
<h3 class="newsletter-module__title">{{ data.title }}</h3>
{% endif %}
{% if data.text %}
<div class="newsletter-module__text">{{ data.text }}</div>
{% endif %}
{% if data.newsletter %}
{% include '@newsletter' with {class: "newsletter-module__newsletter", data: data.newsletter} %}
{% endif %}
</div>
</div>
{% endset %}
{% include '@content-section' with {modifier: "content-section--sticky", data: {title: data.sectionTitle, content: content}} %}
{
"language": "en-US",
"data": {
"sectionTitle": "newsletter",
"title": "Subscribe to our newsletter",
"text": "Stay up to date with new additions and upcoming events",
"newsletter": {
"textfield": {
"label": "newsletter",
"id": "moduleEmail",
"name": "textfield",
"placeholder": "Enter your email here"
},
"button": {
"text": "subscribe"
},
"buttonMobile": {
"icon": "arrow-enter-bold"
},
"check": {
"label": "<span>I agree with <a href=\"#\" class=\"link\">terms and conditions</a></span>",
"id": "check1",
"name": "check"
}
}
}
}
.newsletter-module {
padding: 96px 16px;
@include bp(sm-min) {
padding: 96px 32px;
}
@include bp(lg-min) {
padding: 96px 0;
min-height: 800px;
}
}
.newsletter-module__title {
margin-bottom: 24px;
font-weight: $font-weight-normal;
font-size: 30px;
line-height: 35px;
@include bp(sm-min) {
font-weight: $font-weight-normal;
font-size: $font-size-h3-lg;
line-height: $font-line-height-h3-lg;
}
}
.newsletter-module__text {
margin-bottom: 32px;
@include bp(md-min) {
margin-bottom: 56px;
}
}
import './newsletter-module.scss';