Link 

<div>
    <section class="demo">
        <p>Dies ist <a href="#!">ein klassischer Text Link</a>.</p>
        <p><a class="link-teaser" href="#">Ein Teaser-Link</a></p>
        <p class="author-bio__text">Noch <a href="#!">ein Link in sans-serif</a></p>
        <p><a href="#" class="link-unstyled">Unstyled Link</a></p>
        <p><a class="link--muted" href="#">Muted Link</a></p>
        <h1><a href="#">Eine Headline mit Link</a></h1>
    </section>
    <section class="demo demo--inverted">
        <p>
            <a class="link-teaser inverted-text-color" href="#">Link Teaser inverted</a>
        </p>
        <p>
            <a class="link-teaser inverted-interaction-color" href="#">Link Teaser inverted</a>
        </p>
    </section>
</div>
 
<div>
    <section class="demo">
        <p>Dies ist <a href="#!">ein klassischer Text Link</a>.</p>
        <p><a class="link-teaser" href="#">Ein Teaser-Link</a></p>
        <p class="author-bio__text">Noch <a href="#!">ein Link in sans-serif</a></p>
        <p><a href="#" class="link-unstyled">Unstyled Link</a></p>
        <p><a class="link--muted" href="#">Muted Link</a></p>
        <h1>
            <a href="#">Eine Headline mit Link</a>
        </h1>
    </section>

    <section class="demo demo--inverted">
        <p><a class="link-teaser inverted-text-color" href="#">Link Teaser inverted</a></p>
        <p><a class="link-teaser inverted-interaction-color" href="#">Link Teaser inverted</a></p>
    </section>
</div>
 
/* No context defined. */
  • Content: 
    //
// Default Link - used on all class-less link elements
//

.link-default,
a:not([class]) {
  transition: standard-transition(background-color);
  border-bottom: 1px solid $link-color;
  text-decoration: none;
  color: $link-color;

  &:focus,
  &:hover {
    outline: none;
    background-color: $link-hover-color-light;
  }

  &[href="mailto"] {
    hyphens: none;
  }
}

.link--muted {
  @extend %heading-font-bold;
  @extend %link-unstyled;

  color: $brand-muted;
  font-size: $font-size-xs;
}

.link-teaser {
  @extend %heading-font-heavy;
  @extend %link-unstyled;

  border-bottom: 3px solid $link-teaser-border-color;
  padding-bottom: 2px;
  color: $link-teaser-text-color;
  font-size: $font-size-xs;

  &.inverted-text-color {
    border-bottom: 3px solid $link-teaser-inverted-text-border-color;
    color: $link-teaser-inverted-text-text-color;
  }

  &.inverted-interaction-color {
    border-bottom: 3px solid $link-teaser-inverted-interaction-border-color;
    color: $link-teaser-inverted-interaction-text-color;
  }
}
  • URL: /components/raw/link/_link.scss
  • Filesystem Path: components/01-atoms/text/inline/link/_link.scss
  • Size: 1 KB

No notes defined.