Link

<div>
    <section class="demo">
        <p>Dies ist <a href="#!">ein klassischer Text Link</a>.</p>
        <p><a class="link-teaser" href="#">Mehr erfahren</a>
        </p>
        <p class="author-bio__text">Noch <a href="#!">ein Link in sans-serif</a>
        </p>
    </section>
    <section class="demo demo--inverted">
        <p><a class="link-teaser inverted-text-color" href="#">Mehr erfahren</a>
        </p>
        <p><a class="link-teaser inverted-interaction-color" href="#">Mehr erfahren</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="#">Mehr erfahren</a></p>
        <p class="author-bio__text">Noch <a href="#!">ein Link in sans-serif</a></p>
    </section>

    <section class="demo demo--inverted">
        <p><a class="link-teaser inverted-text-color" href="#">Mehr erfahren</a></p>
        <p><a class="link-teaser inverted-interaction-color" href="#">Mehr erfahren</a></p>
    </section>
</div>
/* No context defined for this component. */
  • Content:
    //
    // Default Link - used on all class-less link elements
    //
    
    // Use relative units for inline links to cover different font faces and sizes.
    $underline-offset: -.1em;
    $underline-width: $underline-offset - .05em;
    $hover-padding: .125em;
    $link-padding: .2em;
    
    // sass-lint:disable force-pseudo-nesting
    .link-default,
    a:not([class]) {
      transition: standard-transition(padding-bottom, padding-top, background-color);
      box-shadow: inset 0 $underline-offset 0 $brand-white, inset 0 $underline-width 0 $link-color;
      padding-bottom: $link-padding;
      text-decoration: none;
      color: $link-color;
    
      &:focus,
      &:hover {
        outline: none;
        background-color: $link-hover-color-light;
        padding-top: $hover-padding;
        padding-bottom: $hover-padding;
      }
    
      &[href^='mailto'] {
        hyphens: none;
      }
    }
    
    .link--muted {
      @extend %heading-font-bold;
      @extend %link-unstyled;
      color: $brand-muted;
      font-size: $link-teaser-font-size;
    }
    
    .link-teaser {
      @extend %heading-font-heavy;
      @extend %link-unstyled;
    
      border-bottom: 3px solid $link-teaser-border-color;
      padding-bottom: 2px;
      line-height: $link-teaser-line-height;
      color: $link-teaser-text-color;
      font-size: $link-teaser-font-size;
    
      &.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.5 KB

There are no notes for this item.