Large Teaser

Large Teaser dienen als hervorgehobene Contentelemnte und/oder zur prägnanten Weiterleitung auf relevante Inhalte.

Large Teaser Dropdown
22/02/2021
TeamBank Markenportal
<div class="module module--large-teaser">
  <div class="inner inner--flex ">
    <div class="teaser teaser--reversed">
      <div class="content">
        <div class="content__box">
                      <div class="content__title">
              <h2 class="h h2">
                                  <span class="preline">
                    Gesucht? Gefunden!                  </span>
                                Alle Downloads auf einen Blick.              </h2>
            </div>
                                <div class="content__text">
              <div class="p p3">
                <p>Ob TeamBank-Logo, easyCredit-Markenleitfaden oder Bilder zu ratenkauf by easyCredit – hier stehen dir alle Downloads zu unseren Marken zur Verfügung und werden aktualisiert, sobald es etwas Neues gibt.</p>
              </div>
            </div>
          
          
                      <div class="content__cta-links">
              <div class="content__cta-links__dropdown">
                <i class="icon-arrow-down"></i>
                <select class="content__cta-links__select" name="content__cta__links" id="content__cta__links">
                                                                                                            <option value="https://teambank.de">TeamBank</option>
                                                                                                                <option value="https://easycredit.de">easyCredit</option>
                                                                                                                <option value="https://easycredit-ratenkauf.de/">ratenkauf</option>
                                                                            </select>
              </div>
                              <a href='https://teambank.de' class='button button--primary button--normal button--black' target='' title='Select'>Select</a>                          </div>
          
        </div>
      </div>
      <div class="media">
                  <div class="media__image">
            <img src='https://markenportal.teambank.de/wp-content/uploads/sites/3/2021/02/TeamBank_Bw2019_01725_b.jpg' alt='TeamBank Bw2019 01725 B' />          </div>
              </div>
    </div>
  </div>
</div>
(function () {
  document.addEventListener("DOMContentLoaded", ()=>{
    const dropdown = document.querySelector('.content__cta-links__select');
    const cta =
      document.querySelector('.content__cta-links__dropdown + a');

    function handleSelect({ target }){
      const { options, selectedIndex } = target;
      const { value } = options[selectedIndex];
      if(cta) {
        cta.href = value;
      }
    }
    if(dropdown){
      dropdown.addEventListener('change', handleSelect);
    }
  })
}());
Large Teaser Left
22/02/2021
TeamBank Markenportal
<div class="module module--large-teaser">
  <div class="inner inner--flex ">
    <div class="teaser teaser--reversed">
      <div class="content">
        <div class="content__box">
                      <div class="content__title">
              <h2 class="h h2">
                                  <span class="preline">
                    Preline                  </span>
                                Title              </h2>
            </div>
                                <div class="content__text">
              <div class="p p3">
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et</p>
              </div>
            </div>
          
                                
          
        </div>
      </div>
      <div class="media">
                  <div class="media__image">
            <img src='https://markenportal.teambank.de/wp-content/uploads/sites/3/2021/02/TB-Team.png' alt='TB Team' />          </div>
              </div>
    </div>
  </div>
</div>
(function () {
  document.addEventListener("DOMContentLoaded", ()=>{
    const dropdown = document.querySelector('.content__cta-links__select');
    const cta =
      document.querySelector('.content__cta-links__dropdown + a');

    function handleSelect({ target }){
      const { options, selectedIndex } = target;
      const { value } = options[selectedIndex];
      if(cta) {
        cta.href = value;
      }
    }
    if(dropdown){
      dropdown.addEventListener('change', handleSelect);
    }
  })
}());
Large Teaser Right
22/02/2021
<div class="module module--large-teaser">
  <div class="inner inner--flex ">
    <div class="teaser teaser--normal">
      <div class="content">
        <div class="content__box">
                      <div class="content__title">
              <h2 class="h h2">
                                  <span class="preline">
                    Preline                  </span>
                                Title              </h2>
            </div>
                                <div class="content__text">
              <div class="p p3">
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et</p>
              </div>
            </div>
          
                                    <div class="content__buttons">
                                                      <div class="content__button">
                      <a href='https://teambank.de' class='button button--primary button--normal button--black' target='' title='TeamBank'>TeamBank</a>                    </div>
                                                </div>
                      
          
        </div>
      </div>
      <div class="media">
                  <div class="media__image">
            <img src='https://markenportal.teambank.de/wp-content/uploads/sites/3/2021/02/TB-Team.png' alt='TB Team' />          </div>
              </div>
    </div>
  </div>
</div>
(function () {
  document.addEventListener("DOMContentLoaded", ()=>{
    const dropdown = document.querySelector('.content__cta-links__select');
    const cta =
      document.querySelector('.content__cta-links__dropdown + a');

    function handleSelect({ target }){
      const { options, selectedIndex } = target;
      const { value } = options[selectedIndex];
      if(cta) {
        cta.href = value;
      }
    }
    if(dropdown){
      dropdown.addEventListener('change', handleSelect);
    }
  })
}());