Navigation Teaser @navigation-teaser

Design

Variants

Navigation-Teaser @navigation-teaser

Vorschau in eignem Tab anzeigen
 
<article class="navigation-teaser navigation-teaser--default navigation-teaser--yellow-dark">
  <div class="navigation-teaser__inner">
    <div class="navigation-teaser__content">
      <div class="navigation-teaser__fancy-image">
        <div class="image loading" style="padding-top: 27.77777777777778%;"><noscript><img class="image__fallback" alt="Fancy Title" height="80" src="/images/fancy-font.png" width="288" /></noscript><img class="image__img js-lazyload" data-src="/images/fancy-font.png" width="288" height="80" alt="Fancy Title" /></div>
      </div>
      <div class="navigation-teaser__cta-link"><a class="cta-link cta-link--right" rel="noopener noreferrer" target="_blank" href="#"><span class="cta-link__text">Jetzt lesen</span><span class="cta-link__icon"><svg class="icon icon--chevron-right" viewBox="0 0 200 200">
  <use xlink:href="#icon-chevron-right"></use>
</svg></span></a></div>
    </div>
    <div class="navigation-teaser__magazine">
      <div class="navigation-teaser__magazine-content">
        <div class="navigation-teaser__links"></div>
      </div>
    </div>
  </div>
</article>

Fancy Font @navigation-teaser--fancy-font

Vorschau in eignem Tab anzeigen
 
<article class="navigation-teaser navigation-teaser--fancy-font navigation-teaser--peach">
  <div class="navigation-teaser__inner">
    <div class="navigation-teaser__content">
      <p class="headline headline--1 navigation-teaser__headline">Programme A – Z</p>
      <div class="navigation-teaser__cta-link"><a class="cta-link cta-link--right" rel="noopener noreferrer" target="_blank" href="#"><span class="cta-link__text">Zum Programmfinder</span><span class="cta-link__icon"><svg class="icon icon--chevron-right" viewBox="0 0 200 200">
  <use xlink:href="#icon-chevron-right"></use>
</svg></span></a></div>
    </div>
    <div class="navigation-teaser__magazine">
      <div class="navigation-teaser__magazine-content">
        <div class="navigation-teaser__links"></div>
      </div>
    </div>
  </div>
</article>

Green @navigation-teaser--green

Vorschau in eignem Tab anzeigen
 
<article class="navigation-teaser navigation-teaser--fancy-font navigation-teaser--green">
  <div class="navigation-teaser__inner">
    <div class="navigation-teaser__content">
      <p class="headline headline--1 navigation-teaser__headline">Programme A – Z</p>
      <div class="navigation-teaser__cta-link"><a class="cta-link cta-link--right" rel="noopener noreferrer" target="_blank" href="#"><span class="cta-link__text">Zum Programmfinder</span><span class="cta-link__icon"><svg class="icon icon--chevron-right" viewBox="0 0 200 200">
  <use xlink:href="#icon-chevron-right"></use>
</svg></span></a></div>
    </div>
    <div class="navigation-teaser__magazine">
      <div class="navigation-teaser__magazine-content">
        <div class="navigation-teaser__links"></div>
      </div>
    </div>
  </div>
</article>

Magazine @navigation-teaser--magazine

Vorschau in eignem Tab anzeigen
 
<article class="navigation-teaser navigation-teaser--magazine navigation-teaser--violet">
  <div class="navigation-teaser__inner">
    <div class="navigation-teaser__content">
      <p class="headline headline--1 navigation-teaser__headline">Noch mehr spannende Stories</p>
      <div class="navigation-teaser__cta-link"><a class="cta-link cta-link--right" rel="noopener noreferrer" target="_blank" href="#"><span class="cta-link__text">Jetzt lesen</span><span class="cta-link__icon"><svg class="icon icon--chevron-right" viewBox="0 0 200 200">
  <use xlink:href="#icon-chevron-right"></use>
</svg></span></a></div>
    </div>
    <div class="navigation-teaser__magazine">
      <div class="navigation-teaser__image">
        <div class="image loading" style="padding-top: 135.96491228070175%;"><noscript><img class="image__fallback" alt="Magazine Cover" height="155" src="/images/magazine.jpg" width="114" /></noscript><img class="image__img js-lazyload" data-src="/images/magazine.jpg" width="114" height="155" alt="Magazine Cover" /></div>
      </div>
      <div class="navigation-teaser__magazine-content">
        <div class="navigation-teaser__text">
          <div class="text">
            <p>Unser aktuelles Magazin</p><strong>»Perspektive«</strong>
          </div>
        </div>
        <div class="navigation-teaser__links">
          <div class="navigation-teaser__link"><a class="link link--download" href="#" target="_blank" download="download.pdf">PDF-Download</a></div>
          <div class="navigation-teaser__icon-link"><a class="icon-link" href="#"><span class="icon-link__icon"><svg class="icon icon--medical" viewBox="0 0 200 200">
  <use xlink:href="#icon-medical"></use>
</svg></span><span class="icon-link__text">Abo</span></a></div>
        </div>
      </div>
    </div>
  </div>
</article>