Link

Links.

Applies to <a> tags as well as .link elements.

Sass Mixin

@mixin link()

Parameters

None.

<!-- Default -->
<a href="#">A classless link,</a>
<a class="link" href="#">I am a link</a>
and
<a class="link -disabled" href="#">I am a disabled link.</a>

<!-- Button -->
While <button class="link">I am a button</button>
that looks like a link.

<!-- Icon -->
Here's
<a class="link" href="#">
    <svg xmlns="http://www.w3.org/2000/svg" class="link__icon" width="16" height="16" viewBox="0 0 24 24" stroke-width="3" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
        <path d="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" />
        <line x1="10" y1="14" x2="20" y2="4" />
        <polyline points="15 4 20 4 20 9" />
    </svg>
    another link
</a>
with an icon before, and
<a class="link" href="#">
    one link
    <svg xmlns="http://www.w3.org/2000/svg" class="link__icon" width="16" height="16" viewBox="0 0 24 24" stroke-width="3" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
        <path d="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" />
        <line x1="10" y1="14" x2="20" y2="4" />
        <polyline points="15 4 20 4 20 9" />
    </svg>
</a>
with the icon after.

<a class="link" href="#">
    Read More
    <svg class="link__icon" viewBox="0 0 24 24" stroke="currentColor" fill="none">
        <polyline points="9 6 15 12 9 18" />
    </svg>
</a>

  • Content:
    @use "/resources/styles/config";
    
    a,
    .link {
        --link-color: var(--color, #{config.$link});
        --link-color-hover: var(--color-hover, #{config.$link-hover});
    
        color: var(--link-color);
        cursor: pointer;
        text-decoration: none;
        transition: color config.$fade-easing var(--duration-fast);
    
        &:hover,
        &:active {
            color: var(--link-color-hover);
        }
    
        &.-disabled,
        &[disabled] {
            --link-color: #{config.$disabled};
            cursor: default;
            pointer-events: none;
        }
    
        &__icon {
            height: 1em;
            vertical-align: text-top;
        }
    }
    
  • URL: /components/raw/link/_index.scss
  • Filesystem Path: resources/styles/atoms/link/_index.scss
  • Size: 597 Bytes