<a href='javascript:(void);' class="external-link" title="Title text">Link text</a>
<a
   {% if rel %}
     rel="{{ rel }}"
   {% endif %}
   href='{{ link }}'
   {% if modifier %}
     class="{{ modifier }}"
   {% endif %}
   {% if aria_label %}
       aria-label="{{ aria_label }}"
   {% endif %}
   {% if aria_labelledby %}
       aria-labelledby="{{ aria_labelledby }}"
   {% endif %}
   title="{{ title }}">{{ text }}</a>
{
  "link": "javascript:(void);",
  "text": "Link text",
  "title": "Title text",
  "aria_label": null,
  "aria_labelledby": null,
  "modifier": "external-link"
}
  • Content:
    a {
      @include themify {
        @include element-states($link-color, $link-color-hover);
        @include element-states(underline, none, $property: 'text-decoration');
      }
    
      transition: color .11s ease-in-out;
      cursor: pointer;
    
      &:focus {
        outline: thin dotted;
      }
    
      &.btn {
        text-decoration: none !important; // sass-lint:disable-line no-important
      }
    
      &.external-link {
        &::before {
          @extend %icon-base-css;
          @extend %icon-newtab;
    
          display: inline-block;
          margin-right: .25rem;
          text-decoration: none;
        }
      }
    }
    
  • URL: /components/raw/link/_link.scss
  • Filesystem Path: components/21-atoms/link/_link.scss
  • Size: 553 Bytes

Links

Both internal and external windows open in the same window by default.

Exceptions are Non-Web Documents (pdf, doc etc) and print-friendly versions.

Links opening in a new window should be marked with the <i class="icon-newtab"></i> icon.