<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="microcard microcard--has-text" href="#">
<div class="microcard__inner">
<div class="microcard__image">
<picture>
<source srcset="https://placehold.co/350x350/A0A0A6/FFFFFF.webp?text=350x350-webp" type="image/webp" />
<img class="microcard__image__img" src="https://picsum.photos/id/FFFFFF/350/350" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." width="350" height="350" loading="lazy" />
</picture>
</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">
<picture>
<source srcset="https://placehold.co/350x350/A0A0A6/FFFFFF.webp?text=350x350-webp" type="image/webp" />
<img class="microcard__image__img" src="https://picsum.photos/id/FFFFFF/350/350" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." width="350" height="350" loading="lazy" />
</picture>
</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">
<picture>
<source srcset="https://placehold.co/350x350/A0A0A6/FFFFFF.webp?text=350x350-webp" type="image/webp" />
<img class="microcard__image__img" src="https://picsum.photos/id/FFFFFF/350/350" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." width="350" height="350" loading="lazy" />
</picture>
</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">
<picture>
<source srcset="https://placehold.co/350x350/A0A0A6/FFFFFF.webp?text=350x350-webp" type="image/webp" />
<img class="microcard__image__img" src="https://picsum.photos/id/FFFFFF/350/350" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." width="350" height="350" loading="lazy" />
</picture>
</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">
<picture>
<source srcset="https://placehold.co/350x350/A0A0A6/FFFFFF.webp?text=350x350-webp" type="image/webp" />
<img class="microcard__image__img" src="https://picsum.photos/id/FFFFFF/350/350" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." width="350" height="350" loading="lazy" />
</picture>
</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">
<picture>
<source srcset="https://placehold.co/350x350/A0A0A6/FFFFFF.webp?text=350x350-webp" type="image/webp" />
<img class="microcard__image__img" src="https://picsum.photos/id/FFFFFF/350/350" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." width="350" height="350" loading="lazy" />
</picture>
</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">
<picture>
<source srcset="https://placehold.co/350x350/A0A0A6/FFFFFF.webp?text=350x350-webp" type="image/webp" />
<img class="microcard__image__img" src="https://picsum.photos/id/FFFFFF/350/350" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." width="350" height="350" loading="lazy" />
</picture>
</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">
<picture>
<source srcset="https://placehold.co/350x350/A0A0A6/FFFFFF.webp?text=350x350-webp" type="image/webp" />
<img class="microcard__image__img" src="https://picsum.photos/id/FFFFFF/350/350" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." width="350" height="350" loading="lazy" />
</picture>
</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="microcard microcard--has-text" href="#">
<div class="microcard__inner">
<div class="microcard__image">
<picture>
<source srcset="https://placehold.co/350x350/A0A0A6/FFFFFF.webp?text=350x350-webp" type="image/webp" />
<img class="microcard__image__img" src="https://picsum.photos/id/FFFFFF/350/350" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." width="350" height="350" loading="lazy" />
</picture>
</div>
<div class="microcard__bottom">
<div class="microcard__headline">
<h3 class="headline headline--3">Aus der Forschung</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">
<picture>
<source srcset="https://placehold.co/350x350/A0A0A6/FFFFFF.webp?text=350x350-webp" type="image/webp" />
<img class="microcard__image__img" src="https://picsum.photos/id/FFFFFF/350/350" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." width="350" height="350" loading="lazy" />
</picture>
</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">
<picture>
<source srcset="https://placehold.co/350x350/A0A0A6/FFFFFF.webp?text=350x350-webp" type="image/webp" />
<img class="microcard__image__img" src="https://picsum.photos/id/FFFFFF/350/350" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." width="350" height="350" loading="lazy" />
</picture>
</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">
<picture>
<source srcset="https://placehold.co/350x350/A0A0A6/FFFFFF.webp?text=350x350-webp" type="image/webp" />
<img class="microcard__image__img" src="https://picsum.photos/id/FFFFFF/350/350" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." width="350" height="350" loading="lazy" />
</picture>
</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">
<picture>
<source srcset="https://placehold.co/350x350/A0A0A6/FFFFFF.webp?text=350x350-webp" type="image/webp" />
<img class="microcard__image__img" src="https://picsum.photos/id/FFFFFF/350/350" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." width="350" height="350" loading="lazy" />
</picture>
</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": "microcard--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": "microcard--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;
}
}
See molecules -> microcard for image sizes.