<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"><img class="image" alt="Alt Text sieht anders aus" src="https://via.placeholder.com/1055x650/cccaca/333333.png" />
                <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-a83f" 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)
      != 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"
  },
  "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;
        }
      }
    }
    
    .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.4 KB

There are no notes for this item.