HIDA - Helmholtz Information and Data Science Academy

Teaser Newsletter 

<!-- Teaser Newsletter -->
<div class="teaser-newsletter">
    <div class="teaser-newsletter__image">
        <div class="image image--cover loading"><noscript><img class="image__fallback" alt="Alternativ-Text" width="1920" height="300" src="../../images/content/teaser-newsletter.jpg" /></noscript><img class="image__img js-lazyload" alt="Alternativ-Text" width="1920" height="300" data-src="../../images/content/teaser-newsletter.jpg" /></div>
    </div>
    <div class="teaser-newsletter__body">
        <div class="teaser-newsletter__headline">
            <h2 class="headline headline--module-2">Newsletter bestellen</h2>
        </div>
        <div class="teaser-newsletter__form">
            <form action="#"><input class="input" placeholder="E-Mail Adresse eingeben und anmelden" type="text"></input><button class="teaser-newsletter__form__submit" type="submit"><svg class="icon icon--send" viewBox="0 0 200 200" role="presentation">
                        <use xlink:href="#icon-send"></use>
                    </svg></button>
                <div class="teaser-newsletter__form__checkbox">
                    <div class="checkbox checkbox--default"><input class="checkbox__input" id="checkbox-|***43d44b***|" type="checkbox" name="checkbox-name" /><label class="checkbox__label" for="checkbox-|***43d44b***|">Ich habe die <a href="#" class="link">Datenschutzerklärung</a> gelesen und bin mit der Datenverarbeitung einverstanden.</label></div>
                </div>
            </form>
        </div>
    </div>
</div>


<!-- Teaser Newsletter -->
<div class="teaser-newsletter">
    <div class="teaser-newsletter__image">
        <div class="image image--cover loading"><noscript><img class="image__fallback" alt="Alternativ-Text" width="1920" height="300" src="../../images/content/teaser-newsletter.jpg" /></noscript><img class="image__img js-lazyload" alt="Alternativ-Text" width="1920" height="300" data-src="../../images/content/teaser-newsletter.jpg" /></div>
    </div>
    <div class="teaser-newsletter__body">
        <div class="teaser-newsletter__headline">
            <h2 class="headline headline--module-2">Newsletter bestellen</h2>
        </div>
        <div class="teaser-newsletter__button"><a class="button button--primary" href="#"><span class="button__inner"><span class="button__text">Zur Anmeldung</span></span></a></div>
    </div>
</div>


#{tag || 'div'}.teaser-newsletter()&attributes(attr)
  .teaser-newsletter__image
    +include('@image--cover', image)
  .teaser-newsletter__body
    .teaser-newsletter__headline
      +include('@headline--module-2', headline)
    if button
      .teaser-newsletter__button
        +include('@button', button)
    else
      .teaser-newsletter__form
        form(action='#')
          +include('@input', input)
          button.teaser-newsletter__form__submit(type='submit')
            +include('@icon', { icon: 'send' })
          .teaser-newsletter__form__checkbox
            +include('@checkbox', checkbox)
 
/* Teaser Newsletter */
{
  "image": {
    "src": "/images/content/teaser-newsletter.jpg",
    "width": 1920,
    "height": 300,
    "alt": "Alternativ-Text"
  },
  "headline": {
    "text": "Newsletter bestellen"
  },
  "input": {
    "attr": {
      "placeholder": "E-Mail Adresse eingeben und anmelden"
    }
  },
  "checkbox": {
    "label": "Ich habe die <a href=\"#\" class=\"link\">Datenschutzerklärung</a> gelesen und bin mit der Datenverarbeitung einverstanden.\n"
  }
}


/* Teaser Newsletter */
{
  "image": {
    "src": "/images/content/teaser-newsletter.jpg",
    "width": 1920,
    "height": 300,
    "alt": "Alternativ-Text"
  },
  "headline": {
    "text": "Newsletter bestellen"
  },
  "button": {
    "href": "#",
    "text": "Zur Anmeldung"
  }
}
  • Content: 
    .teaser-newsletter {
  color: #fff;
  padding: 6rem 1.5rem;
  position: relative;

  @include mq($from: m) {
    padding: 7rem 3rem;
  }

  @include mq($from: xl) {
    padding: 8rem 9rem;
  }
}

.teaser-newsletter__image {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;

  .image {
    height: 100%;
  }
}

.teaser-newsletter__body {
  margin: 0 auto;
  max-width: $content-max-width;
  position: relative;
  z-index: 1;
}

.teaser-newsletter__headline {
  margin-bottom: 3rem;
  text-align: center;

  @include mq($from: m) {
    margin-bottom: 4rem;
  }
}

.teaser-newsletter__form {
  position: relative;
}

.teaser-newsletter__form__submit {
  background: transparent;
  border: 0;
  color: $color-blue;
  height: 5.2rem;
  position: absolute;
  right: 0;
  top: 0;
  width: 5.2rem;
}

.teaser-newsletter__form__submit .icon {
  height: 2.5rem;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 2.5rem;
}

.teaser-newsletter__form__checkbox {
  display: block;
  margin: 3rem auto 0;
  max-width: 43rem;
  text-align: left;

  .checkbox {
    padding-left: 3.5rem;
    position: relative;
  }

  .checkbox__label::before {
    left: 0;
    position: absolute;
    top: 0.8rem;
  }

  .checkbox__label .link {
    color: #fff;
  }
}

.teaser-newsletter__button {
  text-align: center;
}
  • URL: /components/raw/teaser-newsletter/teaser-newsletter.scss
  • Filesystem Path: src/components/molecules/teaser-newsletter/teaser-newsletter.scss
  • Size: 1.4 KB

There are no notes for this item.