<div class="section--accent newsletter-block">
    <div class="content-container">
        <div class="newsletter-block__image">
            <div class="image-wrapper">
                <img src="https://via.placeholder.com/500x250" alt="Newsletter image" />
            </div>
            <div class="island section--wrapper">
                <h2>Don't miss the latest news of Ghent.</h2>
            </div>
        </div>
        <div class="island section--default newsletter-block__content">
            <div>
                <h3>Subscribe to the newsletter of the City of Ghent.</h3>
                <ul class="">
                    <li>Receive weekly updates of the City of Ghent.</li>
                    <li>Be the first to discover new events.</li>
                    <li>Already more then 12.0000 subscribers.</li>
                </ul>
            </div>

            <div class="newsletter-block__form">
                <input type="email" name="newsletter-email" id="newsletter-email" />

                <input type="submit" value="Subscribe" class="btn " />
            </div>
        </div>
        <div class="island section--wrapper newsletter-block__social-media">
            <h3>Follow us on:</h3>
            <ul class="no-style">
                <li><a href="https://www.facebook.com/stadsbestuurgent" title="Facebook"><i class="icon-facebook"></i><span class="element-invisible">Facebook</span></a></li>
                <li><a href="https://twitter.com/stadgent" title="Twitter"><i class="icon-twitter"></i><span class="element-invisible">Twitter</span></a></li>
                <li><a href="https://www.linkedin.com/company/stad-gent" title="LinkedIn"><i class="icon-linkedin"></i><span class="element-invisible">LinkedIn</span></a></li>
                <li><a href="https://www.youtube.com/channel/UCmJLf8SFG0D0GTd6LSSTQLw" title="Youtube"><i class="icon-youtube"></i><span class="element-invisible">Youtube</span></a></li>
                <li><a href="https://www.instagram.com/stadgent/" title="Instagram"><i class="icon-instagram"></i><span class="element-invisible">Instagram</span></a></li>
            </ul>
        </div>
    </div>
</div>
<div class="section--accent newsletter-block">
  <div class="content-container">
    <div class="newsletter-block__image">
      <div class="image-wrapper">
        {% include '@image' with {
          'src': 'https://via.placeholder.com/500x250',
          'alt_text': 'Newsletter image'
        } %}
      </div>
      <div class="island section--wrapper">
        {% include '@h2' with {
        'h2_text': 'Don\'t miss the latest news of Ghent.'
        } %}
      </div>
    </div>
    <div class="island section--default newsletter-block__content">
      <div>
        {% include '@h3' with {
          'h3_text': 'Subscribe to the newsletter of the City of Ghent.'
        } %}
        {% include '@list' with {
          'items': [
            'Receive weekly updates of the City of Ghent.',
            'Be the first to discover new events.',
            'Already more then 12.0000 subscribers.'
          ]
        } %}
      </div>

      <div class="newsletter-block__form">
        {% include '@input-email' with {
          "email_name": "newsletter-email",
          "email_id": "newsletter-email" } %} {% include '@input-submit' with {
          "value": "Subscribe"
        } %}
      </div>
    </div>
    <div class="island section--wrapper newsletter-block__social-media">
      {% include '@h3' with {
      'h3_text': 'Follow us on:'
      } %}
      {% include '@list' with {
        'modifier': 'no-style',
      'items': [
        '<a href="https://www.facebook.com/stadsbestuurgent" title="Facebook"><i class="icon-facebook"></i><span class="element-invisible">Facebook</span></a>',
        '<a href="https://twitter.com/stadgent" title="Twitter"><i class="icon-twitter"></i><span class="element-invisible">Twitter</span></a>',
        '<a href="https://www.linkedin.com/company/stad-gent" title="LinkedIn"><i class="icon-linkedin"></i><span class="element-invisible">LinkedIn</span></a>',
        '<a href="https://www.youtube.com/channel/UCmJLf8SFG0D0GTd6LSSTQLw" title="Youtube"><i class="icon-youtube"></i><span class="element-invisible">Youtube</span></a>',
        '<a href="https://www.instagram.com/stadgent/" title="Instagram"><i class="icon-instagram"></i><span class="element-invisible">Instagram</span></a>'
        ]
      } %}
    </div>
  </div>
</div>
{
  "newsletter_image_src": "https://via.placeholder.com/500x250",
  "newsletter_image_alt_text": "Newsletter image",
  "newsletter_image_title": "Don't miss the latest news of Ghent.",
  "newsletter_content_title": "Subscribe to the newsletter of the City of Ghent.",
  "newsletter_content_list_items": [
    "Receive weekly updates of the City of Ghent.",
    "Be the first to discover new events.",
    "Already more then 12.0000 subscribers."
  ],
  "newsletter_form_name": "newsletter-email",
  "newsletter_form_id": "newsletter-email",
  "newsletter_form_submit_value": "Subscribe",
  "newsletter_social_title": "Volg ons op:",
  "newsletter_social_modifier": "no-style",
  "newsletter_social_items": [
    "<a href='https://www.facebook.com/stadsbestuurgent' title='Facebook'><i class='icon-facebook'></i><span class='element-invisible'>Facebook</span></a>",
    "<a href='https://twitter.com/stadgent' title='Twitter'><i class='icon-twitter'></i><span class='element-invisible'>Twitter</span></a>",
    "<a href='https://www.linkedin.com/company/stad-gent' title='LinkedIn'><i class='icon-linkedin'></i><span class='element-invisible'>LinkedIn</span></a>",
    "<a href='https://www.youtube.com/channel/UCmJLf8SFG0D0GTd6LSSTQLw' title='Youtube'><i class='icon-youtube'></i><span class='element-invisible'>Youtube</span></a>",
    "<a href='https://www.instagram.com/stadgent/' title='Instagram'><i class='icon-instagram'></i><span class='element-invisible'>Instagram</span></a>"
  ]
}
  • Content:
    div.newsletter-block {
      .content-container {
        @include desktop {
          display: flex;
        }
      }
    
      padding-top: 2rem;
      padding-bottom: 2rem;
    
      h2,
      h3 {
        margin-top: 0;
      }
    
      .island {
        margin: 0;
        border: 0;
      }
    
      &__image {
        display: flex;
        width: 100%;
    
        @include desktop {
          flex: 1;
          flex-direction: column;
          flex-flow: column nowrap;
          width: 25%;
        }
    
        .image-wrapper {
          @include tablet {
            display: block;
            flex: 0 0 50%;
            order: 2;
          }
    
          @include desktop {
            display: flex;
            flex: 0 0 50%;
            justify-content: center;
            order: 0;
            width: 100%;
            height: 50%;
            border-radius: $radius-3;
            overflow: hidden;
          }
    
          display: none;
    
          img {
            @include desktop {
              flex-basis: 20rem;
              align-self: center;
              max-width: 20rem;
            }
          }
        }
    
        .island {
          @include tablet {
            flex: 1 0 auto;
            order: 1;
            width: 50%;
          }
    
          @include desktop {
            order: 0;
            width: 100%;
          }
    
          width: 100%;
        }
      }
    
      &__content {
        @include tablet {
          background-image: url('#{$styleguide-dir}/img/svg/vignet-top.svg'), url('#{$styleguide-dir}/img/svg/vignet-right.svg'), url('#{$styleguide-dir}/img/svg/vignet-bottom.svg'), url('#{$styleguide-dir}/img/svg/vignet-left.svg');
          background-repeat: no-repeat;
          background-position: center top, center right, center bottom, center left;
        }
    
        @include desktop {
          flex: 2;
        }
    
        &::before {
          display: none;
        }
    
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        min-height: 18rem;
      }
    
      &__form {
        display: flex;
        align-self: flex-end;
        width: 100%;
        margin-bottom: 1.5rem;
    
        input[type="email"] {
          flex: 5;
        }
    
        input[type="submit"] {
          flex: 2;
        }
      }
    
      &__social-media {
        @include no-link-style;
    
        @include tablet {
          width: 50%;
        }
    
        @include desktop {
          width: 25%;
        }
    
    
        ul {
          display: flex;
          flex-wrap: wrap;
        }
    
        li {
          display: flex;
          margin-right: .3rem;
          margin-bottom: .3rem;
          text-align: center;
    
          a {
            display: flex;
            align-items: center;
            align-self: center;
            justify-content: center;
            width: 3.125rem;
            height: 3.125rem;
            border-radius: $radius-1;
            background-color: $color-blue;
    
            &:hover {
              background-color: lighten($color-blue, 5%);
            }
          }
        }
      }
    }
    
  • URL: /components/raw/newsletter-block/_newsletter-block.scss
  • Filesystem Path: components/31-molecules/building-blocks/newsletter-block/_newsletter-block.scss
  • Size: 2.6 KB

There are no notes for this item.