Large Teaser
Large Teaser dienen als hervorgehobene Contentelemnte und/oder zur prägnanten Weiterleitung auf relevante Inhalte.
Large Teaser Dropdown
22/02/2021
<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
<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);
}
})
}());