Springboard

Link 

<!-- Default -->
<a href="https://kljasdfkljasasdfasfasdfasklkjikuiou.com" class="">Link </a>
<br>


<!-- Visited -->
<a href="https://kljasdfkljasasdfasfasdfasklkjikuiou.com" class="visited">Link (visited)</a>
<br>


<!-- Hover -->
<a href="https://kljasdfkljasasdfasfasdfasklkjikuiou.com" class="hover">Link (hover)</a>
<br>


<!-- Focus -->
<a href="https://kljasdfkljasasdfasfasdfasklkjikuiou.com" class="focus">Link (focus)</a>
<br>


<!-- Active -->
<a href="https://kljasdfkljasasdfasfasdfasklkjikuiou.com" class="active">Link (active)</a>
<br>


<!-- New Tab -->
<a target="_blank" href="https://kljasdfkljasasdfasfasdfasklkjikuiou.com" class="">Link </a>
<br>


<a {{#if target}}target="{{ target }}"{{/if}} href="{{ url }}" class="{{ modifier }}">{{ text }} {{#if modifier }}({{ modifier }}){{/if}}</a>
{{#if separator }}{{{ separator }}}{{/if}}
 
/* Default */
{
  "text": "Link",
  "url": "https://kljasdfkljasasdfasfasdfasklkjikuiou.com",
  "separator": "<br>"
}


/* Visited */
{
  "text": "Link",
  "url": "https://kljasdfkljasasdfasfasdfasklkjikuiou.com",
  "separator": "<br>",
  "modifier": "visited"
}


/* Hover */
{
  "text": "Link",
  "url": "https://kljasdfkljasasdfasfasdfasklkjikuiou.com",
  "separator": "<br>",
  "modifier": "hover"
}


/* Focus */
{
  "text": "Link",
  "url": "https://kljasdfkljasasdfasfasdfasklkjikuiou.com",
  "separator": "<br>",
  "modifier": "focus"
}


/* Active */
{
  "text": "Link",
  "url": "https://kljasdfkljasasdfasfasdfasklkjikuiou.com",
  "separator": "<br>",
  "modifier": "active"
}


/* New Tab */
{
  "text": "Link",
  "url": "https://kljasdfkljasasdfasfasdfasklkjikuiou.com",
  "separator": "<br>",
  "target": "_blank"
}
  • 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.