hkk Frontend 2017

Teaser-Link: Alternatives Icon (blau) 

<a class="teaser-link teaser-link--blue" href=""><span class="teaser-link__inner">Mehr erfahren</span>
<svg class="icon icon--arrow-diagonal" id="icon-cfc9" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-arrow-diagonal"></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": "blue",
  "text": "Mehr erfahren",
  "icon": {
    "icon": "arrow-diagonal"
  }
}
  • 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--blue {
  color: $color-blue;
}

.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: 469 Bytes

There are no notes for this item.