<a class="link " href="#">
	More
</a>
<a class="link {{#if classes}}{{classes}}{{/if}}" href="#">
	{{#if text}}{{text}} {{else}}More{{/if}}
</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.