hkk Frontend 2017

Magazin-Teaser 

<div class="magazin-teaser">
    <div class="magazin-teaser__inner">
        <header class="magazin-teaser__header">
            <h2 class="headline headline--display-2">Aus unserem Magazin
            </h2><img class="magazin-teaser__logo" src="../../../../images/logo-magazin.svg" alt="Logo vom hkk Magazin" />
        </header>
        <div class="magazin-teaser__container">
            <div class="magazin-teaser__image">
                <div class="image-wrap"><img class="image" alt="Alt Text sieht anders aus" src="https://via.placeholder.com/1055x650/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-299a" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-copyright"></use>
</svg>
</button>
                </div>
                <span class="kicker magazin-teaser__tag kicker--red">Das ist ein Kicker</span>
            </div>
            <div class="magazin-teaser__content">
                <span class="kicker magazin-teaser__kicker kicker--transparent-blue">Gesundheit</span>
                <h3 class="headline magazin-teaser__headline headline--headline-1">Männergesundheit: Ein Bart im November
                </h3><a class="teaser-link magazin-teaser__link" href=""><span class="teaser-link__inner">Zum Artikel</span>
<svg class="icon icon--arrow-diagonal" id="icon-e6ee" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-arrow-diagonal"></use>
</svg></a>
            </div>
            <a class="magazin-teaser__overlay-link" href="#" tabindex="-1" aria-hidden="true"></a>
        </div>
    </div>
</div>
 
-
  //- Prepare attr object
  attr = attr || {};
  attr.class = classList(attr.class);

//- Render magazin teaser
#{tag || 'div'}.magazin-teaser&attributes(attr): .magazin-teaser__inner
  header.magazin-teaser__header
    != include('@headline--display-2', headline)

    img.magazin-teaser__logo(src=`${relativeRoot}images/logo-magazin.svg`, alt='Logo vom hkk Magazin')

  .magazin-teaser__container
    .magazin-teaser__image
      != include('@image', image, copyright)
      != include('@kicker--red', { attr: { class: 'magazin-teaser__tag' } })

    if content
      .magazin-teaser__content
        != include('@kicker--transparent-blue', { text: content.kicker, attr: { class: 'magazin-teaser__kicker' } })
        != include('@headline--headline-1', { text: content.headline, level: 3, attr: { class: 'magazin-teaser__headline' } })

        if content.link
          != include('@teaser-link--alt', { text: content.link.text, attr: { class: 'magazin-teaser__link' } })

      //- Faux link
      if content.link
        a.magazin-teaser__overlay-link(href=content.link.href, tabindex='-1', aria-hidden='true')
 
{
  "headline": {
    "text": "Aus unserem Magazin",
    "level": 2
  },
  "image": {
    "image": "https://via.placeholder.com/1055x650/cccaca/333333.png",
    "copyright": "Lorem ipsum dolor sit amet, consectetuer adipiscin"
  },
  "content": {
    "kicker": "Gesundheit",
    "headline": "Männergesundheit: Ein Bart im November",
    "link": {
      "text": "Zum Artikel",
      "href": "#"
    }
  }
}
  • Content: 
    .magazin-teaser {
  position: relative;
}

.magazin-teaser__inner {
  @include mq($from: m) {
    @include make-container();
  }
}

.magazin-teaser__header {
  margin-bottom: 4rem;
  text-align: center;

  @include mq($from: m) {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 5rem;
  }
}

.magazin-teaser__logo {
  max-width: 12rem;

  @include mq($until: m) {
    display: none;
  }

  @include mq($from: l) {
    max-width: 18rem;
  }
}

.magazin-teaser__container {
  position: relative;
}

.magazin-teaser__image {
  max-width: 86rem;
  position: relative;

  .image {
    @include mq($until: m) {
      height: 44rem;
      object-fit: cover;
    }
  }

  .image__copyright {
    bottom: auto;
    top: 0;

    @include mq($from: l) {
      bottom: 0;
      left: 0;
      right: auto;
      top: auto;
    }
  }
}

.magazin-teaser__tag {
  left: 1rem;
  position: absolute;
  top: 2rem;

  @include mq($from: m) {
    left: 2.5rem;
  }
}

.magazin-teaser__kicker {
  margin-bottom: $spacer;
}

.magazin-teaser__link {
  .magazin-teaser:hover & {
    text-decoration: underline;
  }
}

.magazin-teaser__content {
  background-color: #fff;
  margin-left: 1rem;
  margin-right: 1rem;
  margin-top: -10rem;
  padding: 2.3rem;
  position: relative;

  @include mq($from: l) {
    bottom: 0;
    margin: 0;
    padding: 5rem 4rem;
    position: absolute;
    right: 0;
    width: 45rem;
  }
}

.magazin-teaser__overlay-link {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  user-select: none;
  z-index: 1;
}
  • URL: /components/raw/magazin-teaser/magazin-teaser.scss
  • Filesystem Path: src/components/organisms/magazin-teaser/magazin-teaser.scss
  • Size: 1.6 KB

There are no notes for this item.