<!-- Standard -->
<a class="teaser-link" href=""><span class="teaser-link__inner">Mehr erfahren</span>
<svg class="icon icon--arrow-right" id="icon-072b" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-arrow-right"></use>
</svg></a>

<!-- Große Schrift -->
<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-21c4" 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: 'arrow-right'})
/* Standard */
{
  "text": "Mehr erfahren"
}

/* Große Schrift */
{
  "modifier": "big",
  "text": "Bei diesen Tätigkeiten sollten Sie Vorsicht walten lassen"
}

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