GDL - Global Design Language

newsletter: Local 

<div class="c-newsletter u-p-large o-bg-gray u-flex u-column u-row@md u-gap-large u-items-start u-justify-center u-mb-medium o-bg-dark u-color-inverse">
    <div class="u-flex u-column u-gap-small u-items-center u-items-start@md u-justify-center u-wrap-basis">
        <h2 class="u-title-03 u-m-none u-mb-small">
            Tutto il buono del weekend a
            <span class="u-color-theme">Milano</span>
        </h2>

        <p class="u-body-03 u-mb-small u-break-word">
            Iscriviti per ricevere le ultime novità sulle esperienze gastronomiche vicino a te, offerte esclusive ed altre appetitose notizie direttamente nella tua casella di posta.
            <br />
            Ogni venerdì sulla tua e-mail
        </p>
    </div>

    <div class="u-flex u-column u-gap-small u-justify-center u-space-between u-size-full u-wrap-basis">
        <input class="c-form-size--small u-p-small u-block u-size-full u-mb-base u-m-none@md" placeholder="Email" required="" type="email" value="" />

        <label class="u-flex u-items-center u-gap-small"><input type="checkbox" required /><span class="u-caption-02 u-color-secondary">Ho letto e accettato i
                <strong><a class="o-link-text" href="https://citynews.it/termini-servizio" target="_blank">termini del servizio</a></strong>
                e le
                <strong><a class="o-link-text" href="https://citynews.it/privacy" target="_blank">condizioni sulla privacy</a></strong></span></label>

        <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->

        <div class="submit_container clear u-flex u-cursor-pointer u-justify-center u-cursor-pointer">
            <input class="button formEmailButton c-btn u-px-xxxlarge" id="mc-embedded-subscribe" name="subscribe" type="submit" value="Iscriviti" />
        </div>
    </div>
</div>
 
<div
class="c-newsletter u-p-large o-bg-gray u-flex u-column u-row@md u-gap-large u-items-start u-justify-center u-mb-medium o-bg-dark u-color-inverse"
>
<div
  class="u-flex u-column u-gap-small u-items-center u-items-start@md u-justify-center u-wrap-basis"
>
  <h2 class="u-title-03 u-m-none u-mb-small">
    {{title}}
    <span class="u-color-theme">{{label}}</span>
  </h2>

  <p class="u-body-03 u-mb-small u-break-word">
    {{abstract}}
    <br />
    {{summary}}
  </p>
</div>

<div
  class="u-flex u-column u-gap-small u-justify-center u-space-between u-size-full u-wrap-basis"
>
  <input
    class="c-form-size--small u-p-small u-block u-size-full u-mb-base u-m-none@md"
    placeholder="Email"
    required=""
    type="email"
    value=""
  />
  
      <label
        class="u-flex u-items-center u-gap-small"
        ><input
          type="checkbox"
          required
        /><span class="u-caption-02 u-color-secondary"
          >{{placeholder}}
          <strong
            ><a
              class="o-link-text"
              href="https://citynews.it/termini-servizio"
              target="_blank"
              >{{conditions}}</a
            ></strong
          >
          e le
          <strong
            ><a
              class="o-link-text"
              href="https://citynews.it/privacy"
              target="_blank"
              >{{privacy}}</a
            ></strong
          ></span
        ></label
      >

  <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->

  <div
    class="submit_container clear u-flex u-cursor-pointer u-justify-center u-cursor-pointer"
  >
    <input
      class="button formEmailButton c-btn u-px-xxxlarge"
      id="mc-embedded-subscribe"
      name="subscribe"
      type="submit"
      value="Iscriviti"
    />
  </div>
</div>
</div>
 
{
  "title": "Tutto il buono del weekend a",
  "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": "Ho letto e accettato i",
  "conditions": "termini del servizio",
  "privacy": "condizioni sulla privacy",
  "label": "Milano",
  "summary": "Ogni venerdì sulla tua e-mail"
}
  • Content: 
    // 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;
    }
  }
}
  • URL: /components/raw/newsletter/_newsletter.scss
  • Filesystem Path: src/lib/components/newsletter/_newsletter.scss
  • Size: 1.2 KB

Newsletter

This component shows a newsletter for users

Variations

Possible newsletter variations:

  1. Default
  2. Local => created for local edition of CiboToday

Usage

Render newsletter

In order to display a newsletter component use following syntax:

  1. for a default newsletter:
  {% render "@newsletter--default" %}
  1. for a local newsletter:
  {% render "@newsletter--local" %}