City of Ghent Style Guide

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

Behavior

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.

Styling

By default, a link is shown as a link. Links can also by styled as a button. This can be particulary useful in call-to-actions. Note that while a link can be styled as a button, it is important that it remains a link and not a button.

Icons

With the exception of the default (inline) internal link, links show an icon to give an extra hint that it is a link and what type of link it is. The icon is always shown at the right of the label of the link. See the examples.

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 %} >
  {% spaceless %}
      {{ text }}
  {% endspaceless %}
  {% if hidden_read_more %}
      <span class="visually-hidden">
          {{ hidden_read_more }}
      </span>
  {% endif %}
</a>
<a href='#' class="button button-primary button-block icon-favicon">
    Link text </a>
{
  "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;
    
      // 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