<div class="teaser teaser--magazin">
    <div class="teaser__image"><img class="image" alt="" 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>Das ist eine Teaser-Überschrift
            </h3>
        </div>
        <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-diagonal" id="icon-b7a3" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-arrow-diagonal"></use>
</svg></a>
        </div>
    </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 && !magazin) {
    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');

  //- Magazin Item
  if (magazin) attr.class.push('teaser--magazin');

  //- 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, alt: ''})

      if serpMagazin && kicker
        span.headline__kicker.headline__kicker--magazin #{kicker}

  //- Teaser inner
  .teaser__inner
    //- Batch
    if serpMagazin
      img.teaser__batch(src=`${relativeRoot}images/logo-magazin.svg`, alt='Logo vom hkk Magazin')

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

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

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

    //- More link
    unless serp
      .teaser__more
        != include('@teaser-link', {link, icon: { icon: linkIcon || 'arrow-right' }, 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')
{
  "headline": "Das ist eine Teaser-Überschrift",
  "text": null,
  "link": "#",
  "hkkPlus": null,
  "fullwide": null,
  "kicker": "Dachzeile",
  "image": "https://via.placeholder.com/540x360/cccaca/333333.png",
  "magazin": true,
  "linkIcon": "arrow-diagonal"
}
  • 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--magazin {
      border: 0;
    
      .teaser__inner {
        padding-top: $spacer;
    
        @include container('width >= 300px') {
          margin: 0;
          padding: 0;
          padding-top: $spacer;
        }
      }
    }
    
    .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__image {
      position: relative;
    
      .headline__kicker--magazin {
        background-color: #fff;
        bottom: 0;
        color: $color-blue-light;
        font-weight: normal;
        left: -$spacer;
        letter-spacing: 0.2rem;
        margin: 0;
        padding: 0.5rem;
        position: absolute;
        text-transform: uppercase;
      }
    }
    
    .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__batch {
      height: 3.2rem;
      margin-bottom: $spacer;
    }
    
    .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: 4 KB

There are no notes for this item.