<!-- Tabs Slider -->
<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>
<!-- Tabs Slider Events -->
<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">Termine</button><button class="tabs__tab" data-id="tab-2" role="tab">Rückblicke</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__body">
<div class="card__body__inner">
<div class="card__kicker"><span class="card__kicker__text">Ausstellung</span></div>
<div class="card__headline">
<h2 class="headline headline--2">Aus der Forschung</h2>
</div>
<div class="card__details">
<div class="card__details__item"><svg class="icon icon--calendar" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-calendar"></use>
</svg><span class="card__details__item__text">Fr, 6.10.21</span></div>
<div class="card__details__item"><svg class="icon icon--location" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-location"></use>
</svg><span class="card__details__item__text">Ort</span></div>
</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-details" href="#">
<div class="microcard__inner">
<div class="microcard__top">
<div class="microcard__kicker"><span class="microcard__kicker__text">Hackathon</span></div>
</div>
<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">Helmholtz GPU HAckathon</h3>
</div>
<div class="microcard__details">
<div class="microcard__details__item"><svg class="icon icon--calendar" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-calendar"></use>
</svg><span class="microcard__details__item__text">Fr, 6.10.21</span></div>
<div class="microcard__details__item"><svg class="icon icon--location" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-location"></use>
</svg><span class="microcard__details__item__text">Ort</span></div>
</div>
<div class="microcard__icons"><span class="microcard__icons__item"><svg class="icon icon--arrow-up-right" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-arrow-up-right"></use>
</svg></span></div>
</div>
</div>
</a></div>
<div class="slider__slide"><a class="microcard microcard--has-details" href="#">
<div class="microcard__inner">
<div class="microcard__top">
<div class="microcard__kicker"><span class="microcard__kicker__text">Hackathon</span></div>
</div>
<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">Helmholtz GPU HAckathon</h3>
</div>
<div class="microcard__details">
<div class="microcard__details__item"><svg class="icon icon--calendar" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-calendar"></use>
</svg><span class="microcard__details__item__text">Fr, 6.10.21</span></div>
<div class="microcard__details__item"><svg class="icon icon--location" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-location"></use>
</svg><span class="microcard__details__item__text">Ort</span></div>
</div>
<div class="microcard__icons"><span class="microcard__icons__item"><svg class="icon icon--arrow-up-right" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-arrow-up-right"></use>
</svg></span></div>
</div>
</div>
</a></div>
<div class="slider__slide"><a class="microcard microcard--has-details" href="#">
<div class="microcard__inner">
<div class="microcard__top">
<div class="microcard__kicker"><span class="microcard__kicker__text">Hackathon</span></div>
</div>
<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">Helmholtz GPU HAckathon</h3>
</div>
<div class="microcard__details">
<div class="microcard__details__item"><svg class="icon icon--calendar" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-calendar"></use>
</svg><span class="microcard__details__item__text">Fr, 6.10.21</span></div>
<div class="microcard__details__item"><svg class="icon icon--location" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-location"></use>
</svg><span class="microcard__details__item__text">Ort</span></div>
</div>
<div class="microcard__icons"><span class="microcard__icons__item"><svg class="icon icon--arrow-up-right" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-arrow-up-right"></use>
</svg></span></div>
</div>
</div>
</a></div>
<div class="slider__slide"><a class="microcard microcard--has-details" href="#">
<div class="microcard__inner">
<div class="microcard__top">
<div class="microcard__kicker"><span class="microcard__kicker__text">Hackathon</span></div>
</div>
<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">Helmholtz GPU HAckathon</h3>
</div>
<div class="microcard__details">
<div class="microcard__details__item"><svg class="icon icon--calendar" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-calendar"></use>
</svg><span class="microcard__details__item__text">Fr, 6.10.21</span></div>
<div class="microcard__details__item"><svg class="icon icon--location" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-location"></use>
</svg><span class="microcard__details__item__text">Ort</span></div>
</div>
<div class="microcard__icons"><span class="microcard__icons__item"><svg class="icon icon--arrow-up-right" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-arrow-up-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__kicker"><svg class="icon icon--calendar" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-calendar"></use>
</svg><span class="card__kicker__text">6.10.2021 · Berlin</span></div>
<div class="card__headline">
<h2 class="headline headline--2">Aus der Forschung</h2>
</div>
<div class="card__subline">Ausstellung</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" href="#">
<div class="microcard__inner">
<div class="microcard__top">
<div class="microcard__kicker"><svg class="icon icon--calendar" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-calendar"></use>
</svg><span class="microcard__kicker__text">6.10. – 10.10.2021 · Online</span></div><span class="microcard__badge">Extern</span>
</div>
<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">Machine Learning in the Marine Science: Opportunities and Challanges</h3>
</div>
<div class="microcard__subline">Konferenz · von Youmares 11</div>
<div class="microcard__icons"><span class="microcard__icons__item"><svg class="icon icon--arrow-up-right" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-arrow-up-right"></use>
</svg></span><span class="microcard__icons__item"><svg class="icon icon--ticket" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-ticket"></use>
</svg></span></div>
</div>
</div>
</a></div>
<div class="slider__slide"><a class="microcard" href="#">
<div class="microcard__inner">
<div class="microcard__top">
<div class="microcard__kicker"><svg class="icon icon--calendar" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-calendar"></use>
</svg><span class="microcard__kicker__text">6.10. – 10.10.2021 · Online</span></div><span class="microcard__badge">Extern</span>
</div>
<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">Machine Learning in the Marine Science: Opportunities and Challanges</h3>
</div>
<div class="microcard__subline">Konferenz · von Youmares 11</div>
<div class="microcard__icons"><span class="microcard__icons__item"><svg class="icon icon--arrow-up-right" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-arrow-up-right"></use>
</svg></span><span class="microcard__icons__item"><svg class="icon icon--ticket" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-ticket"></use>
</svg></span></div>
</div>
</div>
</a></div>
<div class="slider__slide"><a class="microcard" href="#">
<div class="microcard__inner">
<div class="microcard__top">
<div class="microcard__kicker"><svg class="icon icon--calendar" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-calendar"></use>
</svg><span class="microcard__kicker__text">6.10. – 10.10.2021 · Online</span></div><span class="microcard__badge">Extern</span>
</div>
<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">Machine Learning in the Marine Science: Opportunities and Challanges</h3>
</div>
<div class="microcard__subline">Konferenz · von Youmares 11</div>
<div class="microcard__icons"><span class="microcard__icons__item"><svg class="icon icon--arrow-up-right" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-arrow-up-right"></use>
</svg></span><span class="microcard__icons__item"><svg class="icon icon--ticket" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-ticket"></use>
</svg></span></div>
</div>
</div>
</a></div>
<div class="slider__slide"><a class="microcard" href="#">
<div class="microcard__inner">
<div class="microcard__top">
<div class="microcard__kicker"><svg class="icon icon--calendar" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-calendar"></use>
</svg><span class="microcard__kicker__text">6.10. – 10.10.2021 · Online</span></div><span class="microcard__badge">Extern</span>
</div>
<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">Machine Learning in the Marine Science: Opportunities and Challanges</h3>
</div>
<div class="microcard__subline">Konferenz · von Youmares 11</div>
<div class="microcard__icons"><span class="microcard__icons__item"><svg class="icon icon--arrow-up-right" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-arrow-up-right"></use>
</svg></span><span class="microcard__icons__item"><svg class="icon icon--ticket" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-ticket"></use>
</svg></span></div>
</div>
</div>
</a></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tabs-slider__button"><a class="button button--secondary" href="#"><span class="button__inner"><span class="button__text">Alle Termine</span></span></a></div>
</div>
#{tag || 'div'}.tabs-slider()&attributes(attr)
.tabs-slider__inner
+include('@tabs', tabs)
if button
.tabs-slider__button
+include('@button--secondary', button)
/* Tabs Slider */
{
"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 Events */
{
"tabs": {
"items": [
{
"selected": true,
"id": "tab-1",
"title": "Termine",
"use": "slider",
"settings": {
"slides": [
{
"use": "card--event-type-2",
"settings": {
"headline": "Aus der Forschung"
}
},
{
"use": "microcard--event-type-1"
},
{
"use": "microcard--event-type-1"
},
{
"use": "microcard--event-type-1"
},
{
"use": "microcard--event-type-1"
}
]
}
},
{
"id": "tab-2",
"title": "Rückblicke",
"use": "slider",
"settings": {
"slides": [
{
"use": "card--event-type-1",
"settings": {
"headline": "Aus der Forschung"
}
},
{
"use": "microcard--event-type-2"
},
{
"use": "microcard--event-type-2"
},
{
"use": "microcard--event-type-2"
},
{
"use": "microcard--event-type-2"
}
]
}
}
]
},
"button": {
"href": "#",
"text": "Alle Termine"
}
}
.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.