<div class="tabs-slider">
<div class="tabs-slider__inner">
<div class="tabs">
<div class="tabs__tabs"><button class="tabs__tab tabs__tab--selected" data-id="tab-1" role="tab">News</button><button class="tabs__tab" data-id="tab-2" role="tab">Aus der Forschung</button></div>
<div class="tabs__panels">
<div class="tabs__panel" id="tab-1" role="tabpanel">
<div class="slider" data-autoplay="false" data-playing="false">
<div class="slider__inner">
<div class="slider__slides-wrap">
<div class="slider__slides">
<div class="slider__slide"><a class="card" href="#">
<div class="card__image">
<div class="image loading" style="padding-top: 100%;"><noscript><img class="image__fallback" alt="Alternativ-Text" width="610" height="610" src="https://via.placeholder.com/610x610/A0A0A6/FFFFFF.png?text=610x610" /></noscript><img class="image__img js-lazyload" alt="Alternativ-Text" width="610" height="610" data-src="https://via.placeholder.com/610x610/A0A0A6/FFFFFF.png?text=610x610" /></div>
</div>
<div class="card__play"><svg class="icon icon--play-box" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-play-box"></use>
</svg></div>
<div class="card__body">
<div class="card__body__inner">
<div class="card__headline">
<h2 class="headline headline--2">Heiling durch Gentherapie</h2>
</div>
<div class="card__subline">19.01.2021</div>
<div class="card__icons"><span class="card__icons__item"><svg class="icon icon--arrow-right" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-arrow-right"></use>
</svg></span></div>
</div>
</div>
</a></div>
<div class="slider__slide"><a class="microcard microcard--has-text" href="#">
<div class="microcard__inner">
<div class="microcard__image"><img class="microcard__image__img" src="https://via.placeholder.com/400x400/A0A0A6/ffffff.png?text=400x400" width="400" height="400" alt="Alternativ-Text" /></div>
<div class="microcard__bottom">
<div class="microcard__headline">
<h3 class="headline headline--3">Neue Partner: DASHH und HAW Hamburg</h3>
</div>
<div class="microcard__subline">19.01.2021</div>
<div class="microcard__text">220 Zeichen max. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam sed vitae harum dolore corrupti a molestias blanditiis, deserunt, nostrum nemo distinctio rerumess qui necessitatibus sequi laudantium ipsum.</div>
<div class="microcard__icons"><span class="microcard__icons__item"><svg class="icon icon--arrow-right" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-arrow-right"></use>
</svg></span></div>
</div>
</div>
</a></div>
<div class="slider__slide"><a class="microcard microcard--has-text" href="#">
<div class="microcard__inner">
<div class="microcard__image"><img class="microcard__image__img" src="https://via.placeholder.com/400x400/A0A0A6/ffffff.png?text=400x400" width="400" height="400" alt="Alternativ-Text" /></div>
<div class="microcard__bottom">
<div class="microcard__headline">
<h3 class="headline headline--3">Neue Partner: DASHH und HAW Hamburg</h3>
</div>
<div class="microcard__subline">19.01.2021</div>
<div class="microcard__text">220 Zeichen max. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam sed vitae harum dolore corrupti a molestias blanditiis, deserunt, nostrum nemo distinctio rerumess qui necessitatibus sequi laudantium ipsum.</div>
<div class="microcard__icons"><span class="microcard__icons__item"><svg class="icon icon--arrow-right" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-arrow-right"></use>
</svg></span></div>
</div>
</div>
</a></div>
<div class="slider__slide"><a class="microcard microcard--has-text" href="#">
<div class="microcard__inner">
<div class="microcard__image"><img class="microcard__image__img" src="https://via.placeholder.com/400x400/A0A0A6/ffffff.png?text=400x400" width="400" height="400" alt="Alternativ-Text" /></div>
<div class="microcard__bottom">
<div class="microcard__headline">
<h3 class="headline headline--3">Neue Partner: DASHH und HAW Hamburg</h3>
</div>
<div class="microcard__subline">19.01.2021</div>
<div class="microcard__text">220 Zeichen max. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam sed vitae harum dolore corrupti a molestias blanditiis, deserunt, nostrum nemo distinctio rerumess qui necessitatibus sequi laudantium ipsum.</div>
<div class="microcard__icons"><span class="microcard__icons__item"><svg class="icon icon--arrow-right" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-arrow-right"></use>
</svg></span></div>
</div>
</div>
</a></div>
<div class="slider__slide"><a class="microcard microcard--has-text" href="#">
<div class="microcard__inner">
<div class="microcard__image"><img class="microcard__image__img" src="https://via.placeholder.com/400x400/A0A0A6/ffffff.png?text=400x400" width="400" height="400" alt="Alternativ-Text" /></div>
<div class="microcard__bottom">
<div class="microcard__headline">
<h3 class="headline headline--3">Neue Partner: DASHH und HAW Hamburg</h3>
</div>
<div class="microcard__subline">19.01.2021</div>
<div class="microcard__text">220 Zeichen max. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam sed vitae harum dolore corrupti a molestias blanditiis, deserunt, nostrum nemo distinctio rerumess qui necessitatibus sequi laudantium ipsum.</div>
<div class="microcard__icons"><span class="microcard__icons__item"><svg class="icon icon--arrow-right" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-arrow-right"></use>
</svg></span></div>
</div>
</div>
</a></div>
<div class="slider__slide"><a class="microcard microcard--has-text" href="#">
<div class="microcard__inner">
<div class="microcard__image"><img class="microcard__image__img" src="https://via.placeholder.com/400x400/A0A0A6/ffffff.png?text=400x400" width="400" height="400" alt="Alternativ-Text" /></div>
<div class="microcard__bottom">
<div class="microcard__headline">
<h3 class="headline headline--3">Neue Partner: DASHH und HAW Hamburg</h3>
</div>
<div class="microcard__subline">19.01.2021</div>
<div class="microcard__text">220 Zeichen max. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam sed vitae harum dolore corrupti a molestias blanditiis, deserunt, nostrum nemo distinctio rerumess qui necessitatibus sequi laudantium ipsum.</div>
<div class="microcard__icons"><span class="microcard__icons__item"><svg class="icon icon--arrow-right" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-arrow-right"></use>
</svg></span></div>
</div>
</div>
</a></div>
<div class="slider__slide"><a class="microcard microcard--has-text" href="#">
<div class="microcard__inner">
<div class="microcard__image"><img class="microcard__image__img" src="https://via.placeholder.com/400x400/A0A0A6/ffffff.png?text=400x400" width="400" height="400" alt="Alternativ-Text" /></div>
<div class="microcard__bottom">
<div class="microcard__headline">
<h3 class="headline headline--3">Neue Partner: DASHH und HAW Hamburg</h3>
</div>
<div class="microcard__subline">19.01.2021</div>
<div class="microcard__text">220 Zeichen max. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam sed vitae harum dolore corrupti a molestias blanditiis, deserunt, nostrum nemo distinctio rerumess qui necessitatibus sequi laudantium ipsum.</div>
<div class="microcard__icons"><span class="microcard__icons__item"><svg class="icon icon--arrow-right" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-arrow-right"></use>
</svg></span></div>
</div>
</div>
</a></div>
<div class="slider__slide"><a class="microcard microcard--has-text" href="#">
<div class="microcard__inner">
<div class="microcard__image"><img class="microcard__image__img" src="https://via.placeholder.com/400x400/A0A0A6/ffffff.png?text=400x400" width="400" height="400" alt="Alternativ-Text" /></div>
<div class="microcard__bottom">
<div class="microcard__headline">
<h3 class="headline headline--3">Neue Partner: DASHH und HAW Hamburg</h3>
</div>
<div class="microcard__subline">19.01.2021</div>
<div class="microcard__text">220 Zeichen max. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam sed vitae harum dolore corrupti a molestias blanditiis, deserunt, nostrum nemo distinctio rerumess qui necessitatibus sequi laudantium ipsum.</div>
<div class="microcard__icons"><span class="microcard__icons__item"><svg class="icon icon--arrow-right" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-arrow-right"></use>
</svg></span></div>
</div>
</div>
</a></div>
</div>
</div>
</div>
</div>
</div>
<div class="tabs__panel tabs__panel--hidden" id="tab-2" role="tabpanel">
<div class="slider" data-autoplay="false" data-playing="false">
<div class="slider__inner">
<div class="slider__slides-wrap">
<div class="slider__slides">
<div class="slider__slide"><a class="card" href="#">
<div class="card__image">
<div class="image loading" style="padding-top: 100%;"><noscript><img class="image__fallback" alt="Alternativ-Text" width="610" height="610" src="https://via.placeholder.com/610x610/A0A0A6/FFFFFF.png?text=610x610" /></noscript><img class="image__img js-lazyload" alt="Alternativ-Text" width="610" height="610" data-src="https://via.placeholder.com/610x610/A0A0A6/FFFFFF.png?text=610x610" /></div>
</div>
<div class="card__body">
<div class="card__body__inner">
<div class="card__headline">
<h2 class="headline headline--2">Aus der Forschung</h2>
</div>
<div class="card__subline">19.01.2021</div>
<div class="card__icons"><span class="card__icons__item"><svg class="icon icon--arrow-right" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-arrow-right"></use>
</svg></span></div>
</div>
</div>
</a></div>
<div class="slider__slide"><a class="microcard microcard--has-text" href="#">
<div class="microcard__inner">
<div class="microcard__image"><img class="microcard__image__img" src="https://via.placeholder.com/400x400/A0A0A6/ffffff.png?text=400x400" width="400" height="400" alt="Alternativ-Text" /></div>
<div class="microcard__bottom">
<div class="microcard__headline">
<h3 class="headline headline--3">Neue Partner: DASHH und HAW Hamburg</h3>
</div>
<div class="microcard__subline">19.01.2021</div>
<div class="microcard__text">220 Zeichen max. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam sed vitae harum dolore corrupti a molestias blanditiis, deserunt, nostrum nemo distinctio rerumess qui necessitatibus sequi laudantium ipsum.</div>
<div class="microcard__icons"><span class="microcard__icons__item"><svg class="icon icon--arrow-right" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-arrow-right"></use>
</svg></span></div>
</div>
</div>
</a></div>
<div class="slider__slide"><a class="microcard microcard--has-text" href="#">
<div class="microcard__inner">
<div class="microcard__image"><img class="microcard__image__img" src="https://via.placeholder.com/400x400/A0A0A6/ffffff.png?text=400x400" width="400" height="400" alt="Alternativ-Text" /></div>
<div class="microcard__bottom">
<div class="microcard__headline">
<h3 class="headline headline--3">Neue Partner: DASHH und HAW Hamburg</h3>
</div>
<div class="microcard__subline">19.01.2021</div>
<div class="microcard__text">220 Zeichen max. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam sed vitae harum dolore corrupti a molestias blanditiis, deserunt, nostrum nemo distinctio rerumess qui necessitatibus sequi laudantium ipsum.</div>
<div class="microcard__icons"><span class="microcard__icons__item"><svg class="icon icon--arrow-right" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-arrow-right"></use>
</svg></span></div>
</div>
</div>
</a></div>
<div class="slider__slide"><a class="microcard microcard--has-text" href="#">
<div class="microcard__inner">
<div class="microcard__image"><img class="microcard__image__img" src="https://via.placeholder.com/400x400/A0A0A6/ffffff.png?text=400x400" width="400" height="400" alt="Alternativ-Text" /></div>
<div class="microcard__bottom">
<div class="microcard__headline">
<h3 class="headline headline--3">Neue Partner: DASHH und HAW Hamburg</h3>
</div>
<div class="microcard__subline">19.01.2021</div>
<div class="microcard__text">220 Zeichen max. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam sed vitae harum dolore corrupti a molestias blanditiis, deserunt, nostrum nemo distinctio rerumess qui necessitatibus sequi laudantium ipsum.</div>
<div class="microcard__icons"><span class="microcard__icons__item"><svg class="icon icon--arrow-right" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-arrow-right"></use>
</svg></span></div>
</div>
</div>
</a></div>
<div class="slider__slide"><a class="microcard microcard--has-text" href="#">
<div class="microcard__inner">
<div class="microcard__image"><img class="microcard__image__img" src="https://via.placeholder.com/400x400/A0A0A6/ffffff.png?text=400x400" width="400" height="400" alt="Alternativ-Text" /></div>
<div class="microcard__bottom">
<div class="microcard__headline">
<h3 class="headline headline--3">Neue Partner: DASHH und HAW Hamburg</h3>
</div>
<div class="microcard__subline">19.01.2021</div>
<div class="microcard__text">220 Zeichen max. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam sed vitae harum dolore corrupti a molestias blanditiis, deserunt, nostrum nemo distinctio rerumess qui necessitatibus sequi laudantium ipsum.</div>
<div class="microcard__icons"><span class="microcard__icons__item"><svg class="icon icon--arrow-right" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-arrow-right"></use>
</svg></span></div>
</div>
</div>
</a></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
#{tag || 'div'}.tabs-slider()&attributes(attr)
.tabs-slider__inner
+include('@tabs', tabs)
if button
.tabs-slider__button
+include('@button--secondary', button)
{
"tabs": {
"items": [
{
"selected": true,
"id": "tab-1",
"title": "News",
"use": "slider",
"settings": {
"slides": [
{
"use": "card--news"
},
{
"use": "microcard--news"
},
{
"use": "microcard--news"
},
{
"use": "microcard--news"
},
{
"use": "microcard--news"
},
{
"use": "microcard--news"
},
{
"use": "microcard--news"
},
{
"use": "microcard--news"
}
]
}
},
{
"id": "tab-2",
"title": "Aus der Forschung",
"use": "slider",
"settings": {
"slides": [
{
"use": "card--news",
"settings": {
"headline": "Aus der Forschung",
"play": null
}
},
{
"use": "microcard--news"
},
{
"use": "microcard--news"
},
{
"use": "microcard--news"
},
{
"use": "microcard--news"
}
]
}
}
]
}
}
.tabs-slider {
position: relative;
z-index: 1;
@include mq($until: m) {
padding: 1.5rem 1.5rem 5rem;
}
@include mq($from: m) {
padding: 0 3rem 5rem;
}
@include mq($from: xl) {
padding: 0 9rem 5rem;
}
}
.tabs-slider__inner {
margin: 0 auto;
max-width: 127rem;
}
.tabs-slider .slider {
@include mq($until: m) {
margin-left: -1.5rem;
width: 100vw;
}
@include mq($from: m) {
margin: 0;
width: calc(50% + 50vw);
}
@include mq($from: xxl) {
width: calc(100% + 32.5rem);
}
}
.tabs-slider .slider__dots {
@include mq($from: m) {
left: calc(50% - 1.5rem);
}
@include mq($from: xl) {
left: auto;
right: 50vw;
transform: translateX(50%);
}
@include mq($from: xxl) {
left: 40%;
right: auto;
transform: translateX(-50%);
}
}
.tabs-slider__button {
padding-top: 10rem;
text-align: center;
}
.tabs-slider .microcard__headline .headline {
@include mq($from: m) {
min-height: 6.8rem;
}
}
There are no notes for this item.