Springboard

Link: Active 

<a href="https://kljasdfkljasasdfasfasdfasklkjikuiou.com" class="active">Link (active)</a>
<br>
 
<a {{#if target}}target="{{ target }}"{{/if}} href="{{ url }}" class="{{ modifier }}">{{ text }} {{#if modifier }}({{ modifier }}){{/if}}</a>
{{#if separator }}{{{ separator }}}{{/if}}
 
{
  "text": "Link",
  "url": "https://kljasdfkljasasdfasfasdfasklkjikuiou.com",
  "separator": "<br>",
  "modifier": "active"
}
  • Content: 
    a {
  color: $color-link;
  text-decoration: underline;

  &:hover, &.hover,
  &:focus, &.focus,
  &:active, &.active {
    text-decoration: none;
  }

  &:visited,
  &.visited {
    color: lighten($color-link, 20%);
  }

  &:hover,
  &.hover {
    background: none;
  }

  &:focus,
  &.focus {
    outline: dotted 1px #999;
  }

  &:active,
  &.active {
    outline: dotted 1px #999;
    color: darken($color-link, 10%);
  }

}

[target="_blank"]::after {
    display: inline-block;
    width: 1em;
    height: 1em;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="%2300a4de"><title>external-link</title><path class="path1" d="M25.143 16.571v5.714q0 2.125-1.509 3.634t-3.634 1.509h-14.857q-2.125 0-3.634-1.509t-1.509-3.634v-14.857q0-2.125 1.509-3.634t3.634-1.509h12.571q0.25 0 0.411 0.161t0.161 0.411v1.143q0 0.25-0.161 0.411t-0.411 0.161h-12.571q-1.179 0-2.018 0.839t-0.839 2.018v14.857q0 1.179 0.839 2.018t2.018 0.839h14.857q1.179 0 2.018-0.839t0.839-2.018v-5.714q0-0.25 0.161-0.411t0.411-0.161h1.143q0.25 0 0.411 0.161t0.161 0.411zM32 1.143v9.143q0 0.464-0.339 0.804t-0.804 0.339-0.804-0.339l-3.143-3.143-11.643 11.643q-0.179 0.179-0.411 0.179t-0.411-0.179l-2.036-2.036q-0.179-0.179-0.179-0.411t0.179-0.411l11.643-11.643-3.143-3.143q-0.339-0.339-0.339-0.804t0.339-0.804 0.804-0.339h9.143q0.464 0 0.804 0.339t0.339 0.804z"></path></svg>');
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 70% auto;
    content: '(external link)';
    overflow: hidden;
    white-space: nowrap;
    text-indent: 1em;
}
  • URL: /components/raw/link/_sass.scss
  • Filesystem Path: components/01-elements/01-text/link/_sass.scss
  • Size: 1.6 KB

Note that the classes included here are only to showcase the different states of the link. You don’t have to include the classes. The styles will appear based on the pseudo-classes and browser state.