hkk Frontend 2017

Teaser: Teaser mit Bild 

<div class="teaser teaser--image">
    <div class="teaser__image">
        <div class="image-wrap"><img class="image" alt="" src="https://via.placeholder.com/540x360/cccaca/333333.png" />
            <button class="copyright js-tooltip image__copyright" title="Lorem ipsum dolor sit amet, consectetuer adipiscin" aria-label="Bildquelle anzeigen">
<svg class="icon icon--copyright" id="icon-670a" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-copyright"></use>
</svg>
</button>
        </div>
    </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-5dde" 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>
 
-
  //- 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: '', copyright})

      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": "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",
  "copyright": "Lorem ipsum dolor sit amet, consectetuer adipiscin"
}
  • 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;
    }
  }

  .image__copyright {
    bottom: auto;
    top: 0;
  }
}

.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.