<a class="link link--invert" href="#" title="Title">
    Link
</a>
<a
    class="link {{ class }}"
    href="{{ href }}"
    {{#if title}}
        title="{{ title }}"
    {{else}}
        title="{{ text }}"
    {{/if}}
>
    {{ text }}
</a>
{
  "href": "#",
  "title": "Title",
  "text": "Link",
  "class": "link--invert"
}
  • Content:
    $link__decoration         : underline !default;
    $link__font-family        : $font-family-base !default;
    $link__font-weight        : $font-weight-normal !default;
    $link__color-hover        : $color-secondary !default;
    $link__text-decoration    : none !default;
    $link__color--invert      : $gray-darker !default;
    $link__color-hover--invert: $blue !default;
    
    .link {
        color: $black;
        text-decoration: $link__decoration;
        font-family: $link__font-family;
        font-weight: $link__font-weight;
        text-decoration: $link__text-decoration;
    
        &:hover {
            color: $link__color-hover;
        }
    
        &:focus {
            @include focus();
        }
    
        &--invert {
            color: $link__color--invert;
    
            &:hover {
                color: $link__color-hover--invert;
            }
        }
    
        &--secondary {
            color: $gray-lighter;
    
            &:hover {
                color: $color-primary;
            }
        }
    
        &--red {
            color: $red;
    
            &:hover {
                color: $black;
                text-decoration: underline;
            }
        }
    
        &--grey {
            color: $gray;
        }
    
        &--white {
            color: $white;
        }
    
        // visible only for screen readers and when focused
        &--visually-hidden {
            @include visually-hidden($usePseudo: true);
        }
    
        p &,
        cite & {
            background-clip: content-box;
            &:focus:not(.banner) {
                @include focus-inline();
            }
        }
    }
    
    a {
        @extend .link;
    }
    
  • URL: /components/raw/link/_link.scss
  • Filesystem Path: build/components/01-globals/typography/link/_link.scss
  • Size: 1.4 KB

There are no notes for this item.