<div class="c-newsletter u-px-medium u-py-xlarge o-bg-gray u-flex u-column u-items-center u-justify-center">
<h2 class="u-title-03 u-m-none u-mb-small">Ricevi la nostra Newsletter</h2>
<p class="u-body-03 u-mb-small">Iscriviti per ricevere le ultime novità sulle esperienze gastronomiche vicino a te, offerte esclusive ed altre appetitose notizie direttamente nella tua casella di posta.</p>
<div class="u-flex u-items-center u-row@md u-column u-justify-center u-align-center u-space-between u-mb-small u-size-full">
<input class="c-form-size--small u-block u-size-1-2@md u-size-full u-m-base" type="text" placeholder="Email" />
<button class="c-btn u-flex u-py-small u-px-xxxlarge u-cursor-pointer u-items-center">
Invia
</button>
</div>
<span class="u-label-07">Placeholder per
<a href="" class="o-link-text"><strong>termini e condizioni</strong></a> e
<strong><a href="" class="o-link-text">politica sulla privacy</a></strong></span>
</div>
<div
class="c-newsletter u-px-medium u-py-xlarge o-bg-gray u-flex u-column u-items-center u-justify-center"
>
<h2 class="u-title-03 u-m-none u-mb-small">{{ title }}</h2>
<p class="u-body-03 u-mb-small">{{ abstract }}</p>
<div
class="u-flex u-items-center u-row@md u-column u-justify-center u-align-center u-space-between u-mb-small u-size-full"
>
<input
class="c-form-size--small u-block u-size-1-2@md u-size-full u-m-base"
type="text"
placeholder="Email"
/>
<button
class="c-btn u-flex u-py-small u-px-xxxlarge u-cursor-pointer u-items-center"
>
Invia
</button>
</div>
<span class="u-label-07"
>{{placeholder}}
<a href="" class="o-link-text"><strong>{{conditions}}</strong></a> e
<strong
><a href="" class="o-link-text">{{privacy}}</a></strong
></span
>
</div>
{
"title": "Ricevi la nostra Newsletter",
"abstract": "Iscriviti per ricevere le ultime novità sulle esperienze gastronomiche vicino a te, offerte esclusive ed altre appetitose notizie direttamente nella tua casella di posta.",
"placeholder": "Placeholder per",
"conditions": "termini e condizioni",
"privacy": "politica sulla privacy"
}
// Name: Newsletter
// Description: Newsletter for users
//
// Component: `c-newsletter`
//
// Dependencies: `settings/v7/colors.tokens`
// `settings/v7/global`
// `settings/v7/spacing.tokens`
//
// ========================================================================
@use '../../../assets/sass/settings/v7/colors.tokens' as *;
@use '../../../assets/sass/settings/v7/layout-standard' as *;
@use '../../../assets/sass/settings/v7/global' as *;
@use '../../../assets/sass/settings/v7/spacing.tokens' as *;
@use '../../../assets/sass/tools/v7/mq' as *;
@use '../../../assets/sass/tools/v7/zindex' as *;
@use '../../../assets/sass/tools/v7/typography' as *;
.c-newsletter {
--newsletter-height: 100vh;
height: auto;
background-image: var(--newsletter-bg);
background-repeat: repeat;
background-position: top left;
background-size: contain;
.c-btn {
background-color: var(--theme-color);
color: #{$inverse-01};
&:hover {
background-color: var(--theme-color-dark);
}
}
[data-homepage] & {
text-align: center;
color: #{$inverse-01};
height: var(--newsletter-height);
@include bp(md){
height: auto;
}
}
}
This component shows a newsletter for users
Possible newsletter variations:
In order to display a newsletter component use following syntax:
{% render "@newsletter--default" %} {% render "@newsletter--local" %}