<a class="teaser-link teaser-link--big" href=""><span class="teaser-link__inner">Bei diesen Tätigkeiten sollten Sie Vorsicht walten lassen</span>
<svg class="icon icon--arrow-right" id="icon-b1da" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-arrow-right"></use>
</svg></a>
-
  //- Prepare attr object
  attr = attr || {};
  attr.class = classList(attr.class);
  attr.href = attr.href || link || '';

  //- Process options
  if (modifier) {
    attr.class.push(`teaser-link--${modifier}`);
  }

//- Render atom
a.teaser-link&attributes(attr)
  span.teaser-link__inner !{text}

  != include('@icon', icon)
{
  "modifier": "big",
  "text": "Bei diesen Tätigkeiten sollten Sie Vorsicht walten lassen",
  "icon": {
    "icon": "arrow-right"
  }
}
  • Content:
    .teaser-link {
      color: $color-red;
      display: block;
      font-size: 1.5rem;
      font-weight: bold;
      text-decoration: none;
    
      .u-inverted & {
        color: #fff;
      }
    
      &:hover,
      &:focus {
        text-decoration: none;
      }
    }
    
    .teaser-link--big {
      @include mq($from: m) {
        font-size: 1.9rem;
      }
    }
    
    .teaser-link__inner {
      .teaser-link:hover &,
      .teaser-link:focus &,
      .teaser:hover & {
        text-decoration: underline;
      }
    }
    
  • URL: /components/raw/teaser-link/teaser-link.scss
  • Filesystem Path: src/components/molecules/teaser-link/teaser-link.scss
  • Size: 423 Bytes

There are no notes for this item.