External Link
For links that open in a new window use the external link style.
Usage
To create an external link, use [namespace]-external-link on an anchor tag. If the external link uses a SVG icon, add the
class [namespace]-external-link__icon to the svg inside the anchor tag.
For the yellow variant of the icon, use the modifier class slb-external-link__icon--alt on the SVG.
Modifier selectors
| Modifier selector | Description |
|---|---|
slb-external-link__icon |
Default external link style with matching icon colour |
slb-external-link__icon--alt |
Applies yellow variant of the SVG icon to the external link. |
.slb-external-link__icon - Default External link
This is an external link with an icon, which opens a new window
.slb-external-link__icon--alt - Yellow icon external link
This is an external link with an icon, which opens a new window
typography\link-external.hbs
<!-- external link -->
<p>This is an external link with an icon, which
<a href="#" class="slb-external-link" target="_blank">opens a new window
<svg class="slb-external-link__icon [modifier class]" viewBox="0 0 576 512" id="external-link-alt"><title>external-link-alt</title><path d="M576 24v127.984c0 21.461-25.96 31.98-40.971 16.971l-35.707-35.709-243.523 243.523c-9.373 9.373-24.568 9.373-33.941 0l-22.627-22.627c-9.373-9.373-9.373-24.569 0-33.941L442.756 76.676l-35.703-35.705C391.982 25.9 402.656 0 424.024 0H552c13.255 0 24 10.745 24 24zM407.029 270.794l-16 16A23.999 23.999 0 0 0 384 303.765V448H64V128h264a24.003 24.003 0 0 0 16.97-7.029l16-16C376.089 89.851 365.381 64 344 64H48C21.49 64 0 85.49 0 112v352c0 26.51 21.49 48 48 48h352c26.51 0 48-21.49 48-48V287.764c0-21.382-25.852-32.09-40.971-16.97z"/></svg>
</a>
</p>
Source:
components/_typography.scss