Link
An interactive text element used to navigate to a different page or external resource.
Basic Usage
Any element can be styled as a Link by applying the class cd-link. Most of the time, this class should only be used on a elements.
<a href="#" class="cd-link">This is a Link.</a>
<span class="cd-link">
This is a span styled as a Link.
</span>New Tab
Links that open in a new tab (i.e., have target='blank') will automatically have an icon appended to the text. This can be disabled by adding the class cd-icon-after-none, or added manually by adding the class cd-icon-after-external.
<a href="#" class="cd-link" target="_blank">
I open in a new tab
</a>
<a
href="#"
class="cd-link cd-icon-after-none"
target="_blank"
>
I open in a new tab, but have my icon disabled
</a>
<a href="#" class="cd-link cd-icon-after-external">
I don't open in a new tab, but I have an icon
</a>Download
Links that download a file (i.e., have the download attribute) will automatically have an icon appended to the text. This can be disabled by adding the class cd-icon-after-none, or added manually by adding the class cd-icon-after-download.
<a
href="/download.txt"
download="Download.txt"
class="cd-link"
>
I download a file
</a>
<a
href="/download.txt"
download="Download.txt"
class="cd-link cd-icon-after-none"
>
I download a file, but have my icon disabled
</a>
<a href="#" class="cd-link cd-icon-after-download">
I don't download a file, but I have an icon
</a>Custom Color
To customize the color of a link, set the --cd-link-color and --cd-link-active-color CSS variables.
<span
class="cd-link"
style="
--cd-link-color: var(--cd-color-orange-4);
--cd-link-active-color: var(--cd-color-orange-3);
"
>
This link is orange.
</span>