Link

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>
<!-- Default -->
<a href='#'>
    Link text</a>

<!-- External Link -->
<a href='https://stad.gent'>
    Link text</a>

<!-- Download Link -->
<a href='#' download>
    Link text</a>

<!-- Mailto Link -->
<a href='mailto:info@stad.gent'>
    Link text</a>

<!-- Standalone -->
<a href='#' class="standalone-link">
    Link text</a>

<!-- Standalone External -->
<a href='https://stad.gent' class="standalone-link">
    Link text</a>

<!-- Standalone Mailto -->
<a href='mailto:info@stad.gent' class="standalone-link">
    Link text</a>

<!-- Standalone Download -->
<a href='#' class="standalone-link" download>
    Link text</a>

<!-- Standalone Back -->
<a href='#' class="standalone-link back">
    back</a>

<!-- Button -->
<a href='#' class="button button-primary">
    Link text</a>

<!-- Button Mailto -->
<a href='mailto:info@stad.gent' class="button button-primary">
    Link text</a>

<!-- Button Download -->
<a href='#' class="button button-primary" download>
    Link text</a>

<!-- Button External -->
<a href='https://stad.gent' class="button button-primary">
    Link text</a>

<!-- Button Block -->
<a href='#' class="button button-primary button-block">
    Link text</a>

<!-- Button Block Mailto -->
<a href='mailto:info@stad.gent' class="button button-primary button-block">
    Link text</a>

<!-- Button Block Download -->
<a href='#' class="button button-primary button-block" download>
    Link text</a>

<!-- Button Block Custom Icon -->
<a href='#' class="button button-primary button-block icon-favicon">
    Link text</a>

/* Default */
{
  "link": "#",
  "text": "Link text",
  "aria_label": null
}

/* External Link */
{
  "link": "https://stad.gent",
  "text": "Link text",
  "aria_label": null
}

/* Download Link */
{
  "link": "#",
  "text": "Link text",
  "aria_label": null,
  "download": true
}

/* Mailto Link */
{
  "link": "mailto:info@stad.gent",
  "text": "Link text",
  "aria_label": null
}

/* Standalone */
{
  "link": "#",
  "text": "Link text",
  "aria_label": null,
  "modifier": "standalone-link"
}

/* Standalone External */
{
  "link": "https://stad.gent",
  "text": "Link text",
  "aria_label": null,
  "modifier": "standalone-link"
}

/* Standalone Mailto */
{
  "link": "mailto:info@stad.gent",
  "text": "Link text",
  "aria_label": null,
  "modifier": "standalone-link"
}

/* Standalone Download */
{
  "link": "#",
  "text": "Link text",
  "aria_label": null,
  "modifier": "standalone-link",
  "download": true
}

/* Standalone Back */
{
  "link": "#",
  "text": "back",
  "aria_label": null,
  "modifier": "standalone-link back"
}

/* Button */
{
  "link": "#",
  "text": "Link text",
  "aria_label": null,
  "modifier": "button button-primary"
}

/* Button Mailto */
{
  "link": "mailto:info@stad.gent",
  "text": "Link text",
  "aria_label": null,
  "modifier": "button button-primary"
}

/* Button Download */
{
  "link": "#",
  "text": "Link text",
  "aria_label": null,
  "modifier": "button button-primary",
  "download": true
}

/* Button External */
{
  "link": "https://stad.gent",
  "text": "Link text",
  "aria_label": null,
  "modifier": "button button-primary"
}

/* Button Block */
{
  "link": "#",
  "text": "Link text",
  "aria_label": null,
  "modifier": "button button-primary button-block"
}

/* Button Block Mailto */
{
  "link": "mailto:info@stad.gent",
  "text": "Link text",
  "aria_label": null,
  "modifier": "button button-primary button-block"
}

/* Button Block Download */
{
  "link": "#",
  "text": "Link text",
  "aria_label": null,
  "modifier": "button button-primary button-block",
  "download": true
}

/* Button Block Custom Icon */
{
  "link": "#",
  "text": "Link text",
  "aria_label": null,
  "modifier": "button button-primary button-block icon-favicon"
}

  • 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');
      @include bold-text;
    
      padding: $link-padding 0;
      border-radius: border-radius('radius-1');
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
      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