Link

<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><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-interaction-color" href="#">Link Teaser inverted</a></p>
</section>

<section class="demo demo--accented">
    <p><a class="link-teaser inverted-text-color" href="#">Link Teaser inverted</a></p>
</section>
<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><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-interaction-color" href="#">Link Teaser inverted</a></p>
</section>

<section class="demo demo--accented">
    <p><a class="link-teaser inverted-text-color" href="#">Link Teaser inverted</a></p>
</section>
/* No context defined. */
  • Content:
    //
    // Default Link - used on all class-less link elements
    //
    
    a:not([class]) {
      border-bottom: 1px solid $link-color;
      color: $link-color;
      text-decoration: none;
      transition: standard-transition(background-color);
    
      &:focus,
      &:hover {
        background-color: $link-hover-color-light;
        outline: none;
      }
    
      &[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;
    
      padding-bottom: 2px;
      border-bottom: 3px solid $link-teaser-border-color;
      color: $link-teaser-text-color;
      font-size: $font-size-xs;
      transition: standard-transition(background-color);
    
      &.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;
      }
    }
    
    a.link-teaser {
      &:focus,
      &:hover {
        background-color: $link-hover-color-light;
      }
    }
    
    a.link-teaser.inverted-text-color {
      &:focus,
      &:hover {
        background-color: $link-hover-color-secondary;
      }
    }
    
    a.link-teaser.inverted-interaction-color {
      &:focus,
      &:hover {
        background-color: $link-hover-color-light;
      }
    }
    
  • URL: /components/raw/link/_link.scss
  • Filesystem Path: components/05-atoms/text/inline/link/_link.scss
  • Size: 1.4 KB

No notes defined.