<a class="link" href="#">Default link</a>
<br>
<a class="link link--cta" href="#">CTA link</a>
<br>
<a class="link link--reversed" href="#">Reversed default link</a>
<br>
<a class="link link--cta-reversed" href="#">Reversed CTA link</a>
<br>
<a class="link link--orange" href="#">Orange text link</a>
<br>
<a class="link link--cta link--orange" href="#">Orange text CTA link</a>
<br>
<a class="link link--cta link--external" href="#">Link to extral S&N site</a>
<br>
<a class="link link--cta link--orange link--external-cta" href="#">Open internal page in new tab</a>
<a class="link" href="#">Default link</a>
<br>
<a class="link link--cta" href="#">CTA link</a>
<br>
<a class="link link--reversed" href="#">Reversed default link</a>
<br>
<a class="link link--cta-reversed" href="#">Reversed CTA link</a>
<br>
<a class="link link--orange" href="#">Orange text link</a>
<br>
<a class="link link--cta link--orange" href="#">Orange text CTA link</a>
<br>
<a class="link link--cta link--external" href="#">Link to extral S&N site</a>
<br>
<a class="link link--cta link--orange link--external-cta" href="#">Open internal page in new tab</a>
/* No context defined for this component. */
.link {
    font-family: 'smithnephewlfbold', Arial;
    color: $black--off;
    background: url("/assets/icons/arrow-right-grey.png") no-repeat center right;
    background-image: url("/assets/icons/arrow-right-grey.svg"), none;
    background-repeat: no-repeat;
    background-position: center right;
    padding-right: 1.5em;
}
.link--cta {
    background: url("/assets/icons/arrow-right-orange.png") no-repeat center right;
    background-image: url("/assets/icons/arrow-right-orange.svg"), none;
}
.link--reversed {
    background: url("/assets/icons/arrow-left-grey.png") no-repeat center left;
    background-image: url("/assets/icons/arrow-left-grey.svg"), none;
    background-position: center left;
    padding-left: 1.5em;
    padding-right: 0;

}
.link--cta-reversed {
    background: url("/assets/icons/arrow-left-orange.png") no-repeat center left;
    background-image: url("/assets/icons/arrow-left-orange.svg"), none;
    background-position: center left;
    padding-left: 1.5em;
    padding-right: 0;
    background-size: 18px;
}
.link--orange {
    color: $brand--prime;
}
.link--external {
    background: url("/assets/icons/arrow-topright-grey.png") no-repeat center right;
    background-image: url("/assets/icons/arrow-topright-grey.svg"), none;
    background-position: center right;
    padding-right: 2.5em;
    background-size: 18px;
}
.link--external-cta {
    background: url("/assets/icons/arrow-topright-orange.png") no-repeat center right;
    background-image: url("/assets/icons/arrow-topright-orange.svg"), none;
    background-position: center right;
    padding-right: 2.5em;
    background-size: 18px;
}

There are no notes for this item.