Cards Grid
Cards dienen als Teaser zu weiteren relevanten Seiteninhalten und treten meistens in Gruppen auf. ALs reine Textteaser, Bild und Text oder als reine Bildvariante sind sie abwechslungsreich einsetzbar.
Cards Grid A
22/02/2021
<div class="module module--cards">
<div class="inner">
<div class="category">
<span>TeamBank</span>
</div>
<div class="cards">
<div class="card card--type-a">
<div class="inner">
<div class="image">
<img src='https://markenportal.teambank.de/wp-content/uploads/sites/3/2021/02/eC-logo.svg' alt='EC Logo' /> </div>
<div class="content">
<h5 class="h h5 content__title">Ratenkredit</h5>
<div class="p p4 content__text">
<p class="text">Die TeamBank ist mit easyCredit der Ratenkreditexperte der Genossenschaftlichen FinanzGruppe Volksbanken Raiffeisenbanken.</p>
<p><a class="module link" href="#">Mehr erfahren</a></p>
</div>
</div>
<button class="show-button">
<svg width="32" height="32" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="square"><path d="M10.5.5v20M20.5 10.5H.5"/></g></svg> </button>
</div>
</div>
<div class="card card--type-a">
<div class="inner">
<div class="image">
<img src='https://markenportal.teambank.de/wp-content/uploads/sites/3/2021/02/dfC-logo.svg' alt='DfC Logo' /> </div>
<div class="content">
<h5 class="h h5 content__title">Ratenkredit</h5>
<div class="p p4 content__text">
<p class="text">Die TeamBank Österreich – eine Niederlassung der TeamBank AG Nürnberg – ist mit dem fairen Credit der Ratenkreditexperte der Genossenschaftsbanken in Österreich.</p>
<p><a class="module link" href="#">Mehr erfahren</a></p>
</div>
</div>
<button class="show-button">
<svg width="32" height="32" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="square"><path d="M10.5.5v20M20.5 10.5H.5"/></g></svg> </button>
</div>
</div>
<div class="card card--type-a">
<div class="inner">
<div class="image">
<img src='https://markenportal.teambank.de/wp-content/uploads/sites/3/2021/02/rk-logo.svg' alt='Rk Logo' /> </div>
<div class="content">
<h5 class="h h5 content__title">Ratenkauf</h5>
<div class="p p4 content__text">
<p>ratenkauf by easyCredit ist der einfachste Ratenkauf Deutschlands und einheitlich für E-Commerce und Point of Sale (PoS) gestaltet.</p>
<p><a class="module link" href="#">Mehr erfahren</a></p>
</div>
</div>
<button class="show-button">
<svg width="32" height="32" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="square"><path d="M10.5.5v20M20.5 10.5H.5"/></g></svg> </button>
</div>
</div>
</div>
</div>
</div>(function () {
function init() {
document.querySelectorAll('.module--cards').forEach(module => {
module.querySelectorAll('.card').forEach(card => {
const showButton = card.querySelector('.show-button');
const contentText = card.querySelector('.content__text ');
if (showButton) {
showButton.addEventListener('click', function () {
card.parentNode.childNodes.
forEach(node => {
if (node.nodeType === Node.ELEMENT_NODE) {
if (node !== card) {
node.classList.remove('card--active');
const contentText = node.querySelector('.content__text');
if(contentText){
if (contentText.style.maxHeight) {
contentText.style.maxHeight = null;
}
}
}
}
})
card.classList.toggle('card--active');
if(contentText){
if (contentText.style.maxHeight) {
contentText.style.maxHeight = null;
} else {
contentText.style.maxHeight = contentText.scrollHeight + "px";
}
}
})
}
})
});
}
document.addEventListener('DOMContentLoaded', init);
})();
Cards Grid B
22/02/2021
<div class="module module--cards">
<div class="inner">
<div class="category">
<span>TeamBank</span>
</div>
<div class="cards">
<div class="card card--type-b">
<div class="inner">
<div class="content">
<h5 class="h h5 content__title">Ratenkredit</h5>
<div class="p p4 content__text">
<p class="text">Die TeamBank ist mit easyCredit der Ratenkreditexperte der Genossenschaftlichen FinanzGruppe Volksbanken Raiffeisenbanken.</p>
<p><a class="module link" href="#">Mehr erfahren</a></p>
</div>
</div>
<button class="show-button">
<svg width="32" height="32" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="square"><path d="M10.5.5v20M20.5 10.5H.5"/></g></svg> </button>
</div>
</div>
<div class="card card--type-b">
<div class="inner">
<div class="content">
<h5 class="h h5 content__title">Ratenkredit</h5>
<div class="p p4 content__text">
<p class="text">Die TeamBank Österreich – eine Niederlassung der TeamBank AG Nürnberg – ist mit dem fairen Credit der Ratenkreditexperte der Genossenschaftsbanken in Österreich.</p>
<p><a class="module link" href="#">Mehr erfahren</a></p>
</div>
</div>
<button class="show-button">
<svg width="32" height="32" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="square"><path d="M10.5.5v20M20.5 10.5H.5"/></g></svg> </button>
</div>
</div>
<div class="card card--type-b">
<div class="inner">
<div class="content">
<h5 class="h h5 content__title">Ratenkauf</h5>
<div class="p p4 content__text">
<p>ratenkauf by easyCredit ist der einfachste Ratenkauf Deutschlands und einheitlich für E-Commerce und Point of Sale (PoS) gestaltet.</p>
<p><a class="module link" href="#">Mehr erfahren</a></p>
</div>
</div>
<button class="show-button">
<svg width="32" height="32" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="square"><path d="M10.5.5v20M20.5 10.5H.5"/></g></svg> </button>
</div>
</div>
</div>
</div>
</div>(function () {
function init() {
document.querySelectorAll('.module--cards').forEach(module => {
module.querySelectorAll('.card').forEach(card => {
const showButton = card.querySelector('.show-button');
const contentText = card.querySelector('.content__text ');
if (showButton) {
showButton.addEventListener('click', function () {
card.parentNode.childNodes.
forEach(node => {
if (node.nodeType === Node.ELEMENT_NODE) {
if (node !== card) {
node.classList.remove('card--active');
const contentText = node.querySelector('.content__text');
if(contentText){
if (contentText.style.maxHeight) {
contentText.style.maxHeight = null;
}
}
}
}
})
card.classList.toggle('card--active');
if(contentText){
if (contentText.style.maxHeight) {
contentText.style.maxHeight = null;
} else {
contentText.style.maxHeight = contentText.scrollHeight + "px";
}
}
})
}
})
});
}
document.addEventListener('DOMContentLoaded', init);
})();
Cards Grid C
22/02/2021
<div class="module module--cards">
<div class="inner">
<div class="category">
<span>TeamBank</span>
</div>
<div class="cards">
<div class="card card--type-c">
<div class="inner">
<div class="image">
<img src='https://markenportal.teambank.de/wp-content/uploads/sites/3/2021/02/eC-logo.svg' alt='EC Logo' /> </div>
</div>
</div>
<div class="card card--type-c">
<div class="inner">
<div class="image">
<img src='https://markenportal.teambank.de/wp-content/uploads/sites/3/2021/02/dfC-logo.svg' alt='DfC Logo' /> </div>
</div>
</div>
<div class="card card--type-c">
<div class="inner">
<div class="image">
<img src='https://markenportal.teambank.de/wp-content/uploads/sites/3/2021/02/rk-logo.svg' alt='Rk Logo' /> </div>
</div>
</div>
</div>
</div>
</div>(function () {
function init() {
document.querySelectorAll('.module--cards').forEach(module => {
module.querySelectorAll('.card').forEach(card => {
const showButton = card.querySelector('.show-button');
const contentText = card.querySelector('.content__text ');
if (showButton) {
showButton.addEventListener('click', function () {
card.parentNode.childNodes.
forEach(node => {
if (node.nodeType === Node.ELEMENT_NODE) {
if (node !== card) {
node.classList.remove('card--active');
const contentText = node.querySelector('.content__text');
if(contentText){
if (contentText.style.maxHeight) {
contentText.style.maxHeight = null;
}
}
}
}
})
card.classList.toggle('card--active');
if(contentText){
if (contentText.style.maxHeight) {
contentText.style.maxHeight = null;
} else {
contentText.style.maxHeight = contentText.scrollHeight + "px";
}
}
})
}
})
});
}
document.addEventListener('DOMContentLoaded', init);
})();