Link

When to use this component

A link is used to trigger navigation. A link is used to link a web page (internal or external link) or a document (document link). A link can also be used to link to an e-mail address (mailto link).

When not to use this component

Do not use a link to trigger an action. In this case, use a button.

How it works

All links must have the default behavior, in other words they should open in the same window. This is the case for all types of links, internal links, external links and also links to documents and print-friendly versions of web pages.

The only exception that could be made is when opening the link would otherwise interrupt an ongoing process:

  • The user is filling out a form or a checkout process and needs to click on a link to review, say, terms of service
  • The user is watching video or listening to audio

…, using a modal could be a better solution.

Web accessibility

  • A link should always look like a link.
  • If a link receives a button style, the distinction between a button is conveyed visually.
<a
   {% if rel %}
     rel="{{ rel }}"
   {% endif %}
   href='{{ link }}'
   {% if modifier %}
     class="{{ modifier }}"
   {% endif %}
   {% if aria_label %}
       aria-label="{{ aria_label }}"
   {% endif %}
  {% if download %}
      download
  {% endif %}
  {% if title %}
   title="{{ title }}"
  {% endif %} >
  {% if labeled_by %}
    <span class="visually-hidden">
      {{ labeled_by }}
    </span>
  {% endif %}
  {% spaceless %}
      {{ text }}
  {% endspaceless %}
</a>
<a href='#' class="standalone-link">
    Link text</a>
{
  "link": "#",
  "text": "Link text",
  "aria_label": null,
  "modifier": "standalone-link"
}
  • Content:
    $link-padding: .2em;
    
    %a,
    a {
      @include theme('color', 'color-primary', 'link-color');
      @include link-background('color-primary', 'color-primary--lighten-4', 'link-underline-color', 'link-background-color');
    
      padding: $link-padding 0;
      border-radius: border-radius('radius-1');
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
      font-weight: 600;
      text-decoration: none;
      word-wrap: break-word;
    
      &:focus {
        outline: thin dotted;
      }
    
      // Different button link types. These are links styled as a button.
      &.button {
        @include reset-link-background;
        @include button;
        @include button-icon;
        // Overrule flex for IE
        align-items: flex-start;
        padding-top: .6em;
    
        &::before,
        &::after {
          line-height: 1.4em;
        }
    
        &:not([class*="icon"]) {
          @include button-icon;
          @include icon(arrow-right);
        }
    
        &[href^="http://"]:not(.no-icon),
        &[href^="https://"]:not(.no-icon) {
          @include button-icon;
          @include icon(external-link);
        }
    
        &[href^="mailto:"]:not(.no-icon) {
          @include button-icon;
          @include icon(envelope);
        }
    
        &[href^="tel:"]:not(.no-icon) {
          @include button-icon;
          @include icon(phone);
        }
    
        &[download]:not(.no-icon) {
          @include button-icon;
          @include icon(download);
        }
    
        &.button-success {
          @extend %button-success;
        }
    
        &.button-alert {
          @extend %button-alert;
        }
      }
    
      &::before,
      &::after {
        transition: margin .1s ease-in;
        font-size: 1.5em;
        line-height: 1em;
        vertical-align: -25%;
      }
    
      &:not(.button)::after {
        margin-left: .2rem;
      }
    
      ///
      /// Stand alone links.
      ///
      &.standalone-link:not(.no-icon) {
        @include reset-link-background;
        margin-left: 0;
        padding-left: 0;
    
        &:focus,
        &:hover {
          @include theme('color', 'color-primary--darken-2', 'link-hover-color');
        }
      }
    
      &.standalone-link:not([href^="mailto:"]):not([href^="tel:"]):not([download]):not([href^="http://"]):not([href^="https://"]):not(.back),
      &.button:not([href^="mailto:"]):not([href^="tel:"]):not([download]):not([href^="http://"]):not([href^="https://"]):not([class*="icon-"]) {
        @extend %a-arrow-animation;
      }
    
    
      &.standalone-link:not([href^="mailto:"]):not([href^="tel:"]):not([download]):not([href^="http://"]):not([href^="https://"]):not(.back) {
        @include icon(arrow-right, after);
      }
    
      ///
      /// Download links.
      ///
      &[download]:not(.no-icon) {
        @include icon(download, after);
      }
    
      ///
      /// Mail links.
      ///
      &[href^="mailto:"]:not(.no-icon) {
        @include icon(envelope, after);
      }
    
      ///
      /// Phone links.
      ///
      &[href^="tel:"]:not(.no-icon) {
        @include icon(phone, after);
      }
    
      ///
      /// External links get an indicator.
      ///
      &[href^="http://"]:not(.no-icon),
      &[href^="https://"]:not(.no-icon) {
        @include icon(external-link, after);
    
        &[download]:not(.button):not(.no-icon) {
          @include icon(download, after);
        }
      }
    
      &.back:not(.no-icon) {
        @extend %a-arrow-animation--left;
        @include icon(fancyback, after);
    
        display: inline-flex;
        flex-direction: row-reverse;
        padding-left: 0;
    
        &::after {
          margin-left: -.2rem;
          padding-right: .2rem;
          padding-left: .4rem;
        }
      }
    }
    
    %a-arrow-animation {
      &::after,
      &::before {
        padding-right: .2rem;
      }
    
      &:focus,
      &:hover {
        &::after,
        &::before {
          animation: arrow 1s 2;
    
          // Animation causes pointer flickering in IE.
          @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { // sass-lint:disable-line no-vendor-prefixes
            animation: none;
          }
        }
      }
    
      @keyframes arrow {
        0% {
          padding-right: .2rem;
          padding-left: 0;
        }
    
        40% {
          padding-right: 0;
          padding-left: .2rem;
        }
    
        100% {
          padding-right: .2rem;
          padding-left: 0;
        }
      }
    }
    
    %a-arrow-animation--left {
      &:focus,
      &:hover {
        &::after,
        &::before {
          animation: arrow-left 1s 2;
    
          // Animation causes pointer flickering in IE.
          @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { // sass-lint:disable-line no-vendor-prefixes
            animation: none;
          }
        }
      }
    
      @keyframes arrow-left {
        0% {
          padding-right: .2rem;
          padding-left: .4rem;
        }
    
        40% {
          padding-right: .4rem;
          padding-left: .2rem;
        }
    
        100% {
          padding-right: .2rem;
          padding-left: .4rem;
        }
      }
    }
    
    ///
    /// External links other than group Ghent get an indicator.
    ///
    %a-remove-indicator {
      &[href^="http://"],
      &[href^="https://"] {
        &[href*="stad.gent"] {
          &:not([download]):not(.standalone-link)::after {
            content: none;
          }
    
          ///
          /// Download links.
          ///
          &[download] {
            @include icon(download, after);
          }
    
          ///
          /// Stand alone links.
          ///
          &.standalone-link:not(.no-icon) {
            @extend %a-arrow-animation;
            @include icon(arrow-right, after);
          }
        }
      }
    
      &.button {
        &[href^="http://"]:not(.no-icon),
        &[href^="https://"]:not(.no-icon) {
          &[href*="stad.gent"]:not(.no-icon) {
            @extend %a-arrow-animation;
            @include icon(arrow-right);
    
            &::after {
              content: none;
            }
          }
        }
      }
    }
    
  • URL: /components/raw/link/_link.scss
  • Filesystem Path: components/21-atoms/link/_link.scss
  • Size: 5.3 KB