<!-- Teaser ohne Bild -->
<div class="teaser">
    <div class="teaser__inner">
        <div class="teaser__headline">
            <h3 class="headline headline--headline-1">Das ist eine Teaser-Überschrift
            </h3>
        </div>
        <p class="teaser__text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
        <div class="teaser__more"><a class="teaser-link" href="#"><span class="teaser-link__inner">Mehr erfahren<span class='u-hidden-visually'> zu "Das ist eine Teaser-Überschrift"</span></span>
<svg class="icon icon--arrow-right" id="icon-1bcd" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-arrow-right"></use>
</svg></a>
        </div>
    </div>
    <a class="teaser__overlay-link" href="#" tabindex="-1" aria-hidden="true"></a>
</div>

<!-- Teaser ohne Bild (volle Breite) -->
<div class="teaser teaser--fullwide">
    <div class="teaser__inner">
        <div class="teaser__headline">
            <h3 class="headline headline--headline-1">Das ist eine Teaser-Überschrift
            </h3>
        </div>
        <p class="teaser__text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
        <div class="teaser__more"><a class="teaser-link" href="#"><span class="teaser-link__inner">Mehr erfahren<span class='u-hidden-visually'> zu "Das ist eine Teaser-Überschrift"</span></span>
<svg class="icon icon--arrow-right" id="icon-5ec5" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-arrow-right"></use>
</svg></a>
        </div>
    </div>
    <a class="teaser__overlay-link" href="#" tabindex="-1" aria-hidden="true"></a>
</div>

<!-- hkk-Plus-Teaser ohne Bild -->
<div class="teaser">
    <div class="teaser__inner">
        <div class="teaser__headline">
            <h3 class="headline headline--headline-1">
                <svg class="icon headline__hkk-plus icon--hkk-plus" id="icon-1197" viewBox="0 0 200 200" role="img" aria-labelledby="title-icon-1197">
  <title id="title-icon-1197">HKK Plus</title>
  <use xlink:href="#icon-hkk-plus"></use>
</svg>Das ist eine Teaser-Überschrift
            </h3>
        </div>
        <p class="teaser__text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
        <div class="teaser__more"><a class="teaser-link" href="#"><span class="teaser-link__inner">Mehr erfahren<span class='u-hidden-visually'> zu "Das ist eine Teaser-Überschrift"</span></span>
<svg class="icon icon--arrow-right" id="icon-3859" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-arrow-right"></use>
</svg></a>
        </div>
    </div>
    <a class="teaser__overlay-link" href="#" tabindex="-1" aria-hidden="true"></a>
</div>

<!-- Teaser mit Bild -->
<div class="teaser teaser--image">
    <div class="teaser__image"><img class="image" alt="Alt Text sieht anders aus" src="https://via.placeholder.com/540x360/cccaca/333333.png" />
    </div>
    <div class="teaser__inner">
        <div class="teaser__headline">
            <h3 class="headline headline--headline-1">Das ist eine Teaser-Überschrift
            </h3>
        </div>
        <p class="teaser__text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
        <div class="teaser__more"><a class="teaser-link" href="#"><span class="teaser-link__inner">Mehr erfahren<span class='u-hidden-visually'> zu "Das ist eine Teaser-Überschrift"</span></span>
<svg class="icon icon--arrow-right" id="icon-0e53" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-arrow-right"></use>
</svg></a>
        </div>
    </div>
    <a class="teaser__overlay-link" href="#" tabindex="-1" aria-hidden="true"></a>
</div>

<!-- Teaser mit Bild als Listenelement -->
<div class="teaser teaser--fullwide teaser--list-image teaser--list-item">
    <div class="teaser__image"><img class="image" alt="Alt Text sieht anders aus" src="https://via.placeholder.com/255x170/cccaca/333333.png" />
    </div>
    <div class="teaser__inner">
        <div class="teaser__headline">
            <h3 class="headline headline--headline-1">Das ist eine Teaser-Überschrift
            </h3>
        </div>
        <p class="teaser__text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
        <div class="teaser__more"><a class="teaser-link" href="#"><span class="teaser-link__inner">Mehr erfahren<span class='u-hidden-visually'> zu "Das ist eine Teaser-Überschrift"</span></span>
<svg class="icon icon--arrow-right" id="icon-135a" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-arrow-right"></use>
</svg></a>
        </div>
    </div>
    <a class="teaser__overlay-link" href="#" tabindex="-1" aria-hidden="true"></a>
</div>

<!-- Teaser mit Icon als Listenelement -->
<div class="teaser teaser--fullwide teaser--list-item teaser--has-icon">
    <div class="teaser__inner">
        <div class="teaser__headline">
            <h3 class="headline headline--headline-1">Das ist eine Teaser-Überschrift
            </h3>
        </div>
        <p class="teaser__text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
        <div class="teaser__more"><a class="teaser-link" href="#"><span class="teaser-link__inner">Mehr erfahren<span class='u-hidden-visually'> zu "Das ist eine Teaser-Überschrift"</span></span>
<svg class="icon icon--arrow-right" id="icon-7e85" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-arrow-right"></use>
</svg></a>
        </div>
    </div>
    <div class="teaser__icon">
        <svg class="icon icon--pdf" id="icon-c545" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-pdf"></use>
</svg><span class="u-hidden-visually">PDF-Dokument</span>
    </div>
    <a class="teaser__overlay-link" href="#" tabindex="-1" aria-hidden="true"></a>
</div>

<!-- hkk-Plus-Teaser mit Bild -->
<div class="teaser teaser--image">
    <div class="teaser__image"><img class="image" alt="Alt Text sieht anders aus" src="https://via.placeholder.com/540x360/cccaca/333333.png" />
    </div>
    <div class="teaser__inner">
        <div class="teaser__headline">
            <h3 class="headline headline--headline-1">
                <svg class="icon headline__hkk-plus icon--hkk-plus" id="icon-198e" viewBox="0 0 200 200" role="img" aria-labelledby="title-icon-198e">
  <title id="title-icon-198e">HKK Plus</title>
  <use xlink:href="#icon-hkk-plus"></use>
</svg>Das ist eine Teaser-Überschrift
            </h3>
        </div>
        <p class="teaser__text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
        <div class="teaser__more"><a class="teaser-link" href="#"><span class="teaser-link__inner">Mehr erfahren<span class='u-hidden-visually'> zu "Das ist eine Teaser-Überschrift"</span></span>
<svg class="icon icon--arrow-right" id="icon-1da2" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-arrow-right"></use>
</svg></a>
        </div>
    </div>
    <a class="teaser__overlay-link" href="#" tabindex="-1" aria-hidden="true"></a>
</div>

<!-- SERP Teaser -->
<div class="teaser teaser--fullwide teaser--serp-item">
    <div class="teaser__inner">
        <div class="teaser__headline">
            <h3 class="headline headline--headline-1"><span class="headline__kicker"><span class="headline__kicker-text">Dachzeile<span class="u-hidden-visually">: </span></span><span class="headline__kicker-facette">Artikel / Thementag</span></span>Das ist eine Teaser-Überschrift
            </h3>
        </div>
        <p class="teaser__text"><em class="teaser__highlight">Sonderleistungen</em> für Gewerkschaftsmitglieder sind zulässig. Das Bundesarbeitsgericht (BAG) hat mit Urteil vom 15. April 2015 (AZ 4 AZR 796/13) entschieden, … <a class="teaser__read-link" href="#">weiterlesen</a></p>
    </div>
    <a class="teaser__overlay-link" href="#" tabindex="-1" aria-hidden="true"></a>
</div>

<!-- SERP Teaser mit Bild -->
<div class="teaser teaser--fullwide teaser--list-image teaser--serp-item">
    <div class="teaser__image"><img class="image" alt="Alt Text sieht anders aus" src="https://via.placeholder.com/540x360/cccaca/333333.png" />
    </div>
    <div class="teaser__inner">
        <div class="teaser__headline">
            <h3 class="headline headline--headline-1"><span class="headline__kicker"><span class="headline__kicker-text">Dachzeile<span class="u-hidden-visually">: </span></span><span class="headline__kicker-facette">Artikel / Thementag</span></span>Das ist eine Teaser-Überschrift
            </h3>
        </div>
        <p class="teaser__text"><em class="teaser__highlight">Sonderleistungen</em> für Gewerkschaftsmitglieder sind zulässig. Das Bundesarbeitsgericht (BAG) hat mit Urteil vom 15. April 2015 (AZ 4 AZR 796/13) entschieden, … <a class="teaser__read-link" href="#">weiterlesen</a></p>
    </div>
    <a class="teaser__overlay-link" href="#" tabindex="-1" aria-hidden="true"></a>
</div>

<!-- SERP Teaser mit Icon -->
<div class="teaser teaser--fullwide teaser--serp-item teaser--has-icon">
    <div class="teaser__inner">
        <div class="teaser__headline">
            <h3 class="headline headline--headline-1"><span class="headline__kicker"><span class="headline__kicker-text">Dachzeile<span class="u-hidden-visually">: </span></span><span class="headline__kicker-facette">Artikel / Thementag</span></span>Das ist eine Teaser-Überschrift
            </h3>
        </div>
        <p class="teaser__text"><em class="teaser__highlight">Sonderleistungen</em> für Gewerkschaftsmitglieder sind zulässig. Das Bundesarbeitsgericht (BAG) hat mit Urteil vom 15. April 2015 (AZ 4 AZR 796/13) entschieden, … <a class="teaser__read-link" href="#">weiterlesen</a></p>
    </div>
    <div class="teaser__icon">
        <svg class="icon icon--pdf" id="icon-2f6a" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-pdf"></use>
</svg><span class="u-hidden-visually">PDF-Dokument</span>
    </div>
    <a class="teaser__overlay-link" href="#" tabindex="-1" aria-hidden="true"></a>
</div>

-
  //- Prepare attr object
  attr = attr || {};
  attr.class = classList(attr.class);

  //- Fullwide
  if (fullwide) attr.class.push('teaser--fullwide');

  //- Transparent
  if (transparent) attr.class.push('teaser--transparent');

  //- Image
  if (image) {
    if (listItem || serp) attr.class.push('teaser--list-image');
    else attr.class.push('teaser--image');
  }

  //- List Item
  if (listItem) attr.class.push('teaser--list-item');

  //- Serp Item
  if (serp) attr.class.push('teaser--serp-item');

  //- With icon
  hasIcon = false;

  if ((serp || listItem) && icon && !image) {
    hasIcon = true;
    attr.class.push('teaser--has-icon');
  }

//- Render teaser
.teaser&attributes(attr)
  //- Teaser image
  if image
    .teaser__image
      != include('@image', {image})

  //- Teaser inner
  .teaser__inner
    //- Headline
    .teaser__headline
      - headlineClass = small ? '@headline--headline-2' : '@headline--headline-1'

      != include(headlineClass, { kicker: kicker, text: headline, facette: facette, hkkPlus, level: 3 })

    //- Content
    if text
      p.teaser__text #{text}
    else if content
      != renderPug(content)

    //- More link
    unless serp
      .teaser__more
        != include('@teaser-link', {link, text: `Mehr erfahren<span class='u-hidden-visually'> zu "${headline}"</span>`})

  //- Teaser icon
  if hasIcon
    .teaser__icon
      != include('@icon', { icon })
      if iconLabel
        span.u-hidden-visually #{iconLabel}

  //- Faux link
  a.teaser__overlay-link(href=link, tabindex='-1', aria-hidden='true')
/* Teaser ohne Bild */
{
  "headline": "Das ist eine Teaser-Überschrift",
  "text": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.",
  "link": "#",
  "hkkPlus": null,
  "fullwide": null
}

/* Teaser ohne Bild (volle Breite) */
{
  "headline": "Das ist eine Teaser-Überschrift",
  "text": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.",
  "link": "#",
  "hkkPlus": null,
  "fullwide": true
}

/* hkk-Plus-Teaser ohne Bild */
{
  "headline": "Das ist eine Teaser-Überschrift",
  "text": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.",
  "link": "#",
  "hkkPlus": true,
  "fullwide": null
}

/* Teaser mit Bild */
{
  "headline": "Das ist eine Teaser-Überschrift",
  "text": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.",
  "link": "#",
  "hkkPlus": null,
  "fullwide": null,
  "image": "https://via.placeholder.com/540x360/cccaca/333333.png"
}

/* Teaser mit Bild als Listenelement */
{
  "headline": "Das ist eine Teaser-Überschrift",
  "text": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.",
  "link": "#",
  "hkkPlus": null,
  "fullwide": true,
  "listItem": true,
  "image": "https://via.placeholder.com/255x170/cccaca/333333.png"
}

/* Teaser mit Icon als Listenelement */
{
  "headline": "Das ist eine Teaser-Überschrift",
  "text": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.",
  "link": "#",
  "hkkPlus": null,
  "fullwide": true,
  "listItem": true,
  "icon": "pdf",
  "iconLabel": "PDF-Dokument"
}

/* hkk-Plus-Teaser mit Bild */
{
  "headline": "Das ist eine Teaser-Überschrift",
  "text": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.",
  "link": "#",
  "hkkPlus": true,
  "fullwide": null,
  "image": "https://via.placeholder.com/540x360/cccaca/333333.png"
}

/* SERP Teaser */
{
  "headline": "Das ist eine Teaser-Überschrift",
  "text": null,
  "link": "#",
  "hkkPlus": null,
  "fullwide": true,
  "serp": true,
  "kicker": "Dachzeile",
  "facette": "Artikel / Thementag",
  "content": "p.teaser__text #[em.teaser__highlight Sonderleistungen] für Gewerkschaftsmitglieder sind zulässig. Das Bundesarbeitsgericht (BAG) hat mit Urteil vom 15. April 2015 (AZ 4 AZR 796/13) entschieden, … #[a.teaser__read-link(href='#') weiterlesen]\n"
}

/* SERP Teaser mit Bild */
{
  "headline": "Das ist eine Teaser-Überschrift",
  "text": null,
  "link": "#",
  "hkkPlus": null,
  "fullwide": true,
  "serp": true,
  "kicker": "Dachzeile",
  "facette": "Artikel / Thementag",
  "image": "https://via.placeholder.com/540x360/cccaca/333333.png",
  "content": "p.teaser__text #[em.teaser__highlight Sonderleistungen] für Gewerkschaftsmitglieder sind zulässig. Das Bundesarbeitsgericht (BAG) hat mit Urteil vom 15. April 2015 (AZ 4 AZR 796/13) entschieden, … #[a.teaser__read-link(href='#') weiterlesen]\n"
}

/* SERP Teaser mit Icon */
{
  "headline": "Das ist eine Teaser-Überschrift",
  "text": null,
  "link": "#",
  "hkkPlus": null,
  "fullwide": true,
  "serp": true,
  "kicker": "Dachzeile",
  "facette": "Artikel / Thementag",
  "icon": "pdf",
  "iconLabel": "PDF-Dokument",
  "content": "p.teaser__text #[em.teaser__highlight Sonderleistungen] für Gewerkschaftsmitglieder sind zulässig. Das Bundesarbeitsgericht (BAG) hat mit Urteil vom 15. April 2015 (AZ 4 AZR 796/13) entschieden, … #[a.teaser__read-link(href='#') weiterlesen]\n"
}

  • Content:
    .teaser {
      border-bottom: 1px solid $color-steelgrey-light;
      font-size: 1.5rem;
      margin-bottom: 2.5rem;
      padding-bottom: 2rem;
      position: relative;
    }
    
    .teaser--serp-item {
      margin: 0;
      padding: 2rem 0;
    
      .teaser__inner {
        padding-left: 0;
      }
    
      .teaser__image {
        display: none;
        min-width: 255px;
      }
    
      .teaser__text {
        margin: 0;
      }
    
      @include mq($from: m) {
        display: flex;
        margin: 0;
        padding: 2.5rem 0;
    
        .teaser__image {
          display: block;
        }
    
        &:last-child {
          margin-bottom: 8rem;
        }
      }
    }
    
    .teaser--list-item {
      margin: 0;
      padding: 2rem 0;
    
      .teaser__inner {
        padding-left: 0;
      }
    
      .teaser__image {
        display: none;
        min-width: 255px;
      }
    
      &:first-child {
        border-top: 1px solid $color-steelgrey-light;
      }
    
      @include mq($from: m) {
        display: flex;
        padding: 4rem 0;
    
        .teaser__image {
          display: block;
        }
    
        &:last-child {
          margin-bottom: 8rem;
        }
      }
    }
    
    .teaser--has-icon {
      display: flex;
    
      .teaser__icon {
        color: $color-steelgrey-light;
        font-size: 3.2rem;
        line-height: 1;
        margin-left: 1rem;
      }
    
      @include mq($from: m) {
        .teaser__icon {
          font-size: 4.8rem;
        }
      }
    
      @include mq($from: l) {
        align-items: center;
    
        .teaser__icon {
          font-size: 6.8rem;
          margin-left: 2rem;
        }
      }
    }
    
    .teaser--list-image {
      .teaser__inner {
        @include mq($from: m) {
          @include container('width >= 300px') {
            margin-left: 1rem;
            margin-right: 1rem;
            padding-left: 1.5rem;
            padding-right: 1.5rem;
          }
    
          @include container('width >= 540px') {
            margin-left: 0;
            margin-right: 0;
            padding-left: 2rem;
            padding-right: 2rem;
          }
        }
      }
    }
    
    .teaser--image {
      .teaser__inner {
        padding-top: 2rem;
    
        @include mq($until: m) {
          @include container('width >= 300px') {
            margin-top: -4.5rem;
          }
        }
    
        @include container('width >= 460px') {
          margin-top: -4.5rem;
        }
    
        @include container('width >= 540px') {
          margin-top: -7.5rem;
        }
      }
    }
    
    .teaser__inner {
      background-color: #fff;
      position: relative;
    
      @include mq($until: m) {
        @include container('width >= 300px') {
          margin-left: 1rem;
          margin-right: 1rem;
          padding-left: 1.5rem;
          padding-right: 1.5rem;
        }
      }
    
      @include container('width >= 460px') {
        margin-left: 1rem;
        margin-right: 1rem;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
      }
    
      @include container('width >= 540px') {
        margin-left: 3rem;
        margin-right: 3rem;
        padding-left: 2.5rem;
        padding-right: 2.5rem;
      }
    
      .teaser--fullwide & {
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
      }
    
      .teaser--transparent & {
        background-color: transparent;
      }
    }
    
    .teaser__headline {
      margin-bottom: 1.5rem;
    
      .headline__kicker {
        color: $color-blue;
        margin-bottom: 1rem;
      }
    
      @include mq($from: l) {
        margin-bottom: -0.5rem;
      }
    }
    
    .teaser__highlight {
      background-color: $color-turquoise;
      font-style: normal;
      padding: 0.1rem 0.2rem;
    }
    
    .teaser__more {
      position: relative;
      z-index: 2;
    }
    
    .teaser__read-link {
      color: $color-blue-light;
    
      .teaser:hover & {
        text-decoration: underline;
      }
    }
    
    .teaser__overlay-link {
      bottom: 0;
      left: 0;
      position: absolute;
      right: 0;
      top: 0;
      user-select: none;
      z-index: 1;
    }
    
  • URL: /components/raw/teaser/teaser.scss
  • Filesystem Path: src/components/organisms/teaser/teaser.scss
  • Size: 3.4 KB

There are no notes for this item.