Link
Examples
Base
<chi-link href="#">Link</chi-link><a class="chi-link" href="#">Link</a>
Disabled
Make links appear inactive by adding the disabled boolean attribute
or -disabled class.
<chi-link href="#" disabled>Link</chi-link><a class="chi-link -disabled" href="#">Link</a>
CTA
Call to action (CTA) links are prominent links used primarily on marketing web pages to encourage users to perform a specific action (e.g. Get started, Learn more). Use link sizes to render CTA links larger or smaller.
<chi-link href="#" cta>Learn more</chi-link><a class="chi-link -cta" href="#">Learn more</a>
Labeled Icon Link
Use labeled icon links to render both text and icons inside link tags.
<chi-link href="#">
<chi-icon icon="circle-question-outline"></chi-icon>
<span>Help</span>
</chi-link><a class="chi-link" href="#">
<div class="chi-link__content">
<i class="chi-icon icon-circle-question-outline"></i>
<span>Help</span>
</div>
</a>
Icon Link
Use icon links to render icons inside link tags.
Note: All icon links without text labels
must define a label in the alternative-text attribute for accessibility.
<chi-link href="#" alternative-text="View helpful information about this topic">
<chi-icon icon="circle-question-outline"></chi-icon>
</chi-link><a class="chi-link" href="#" aria-label="View helpful information about this topic">
<div class="chi-link__content">
<i class="chi-icon icon-circle-question-outline"></i>
</div>
</a>
Target
Use target to specify where to open a link. Supported values are:
_self, _blank, _parent, _top,
or a custom named frame framename. The default value is _self.
<!-- Open a link in the same frame as it was clicked (default) -->
<chi-link href="#" target="_self">Link</chi-link>
<!-- Open a link in a new window or tab -->
<chi-link href="#" target="_blank">Link</chi-link>
<!-- Open a link in the parent frame -->
<chi-link href="#" target="_parent">Link</chi-link>
<!-- Open a link in the full body of the window -->
<chi-link href="#" target="_top">Link</chi-link>
<!-- Open a link in a custom named frame -->
<chi-link href="#" target="framename">Link</chi-link><!-- Open a link in the same frame as it was clicked (default) -->
<a class="chi-link" href="#" target="_self">Link</a>
<!-- Open a link in a new window or tab -->
<a class="chi-link" href="#" target="_blank">Link</a>
<!-- Open a link in the parent frame -->
<a class="chi-link" href="#" target="_parent">Link</a>
<!-- Open a link in the full body of the window -->
<a class="chi-link" href="#" target="_top">Link</a>
<!-- Open a link in a custom named frame -->
<a class="chi-link" href="#" target="framename">Link</a>
Rel
Use rel to set the relationship between the current page and the linked page.
Rel supports all HTML a attribute values. Examples include:
alternate, external, next,
nofollow, noreferrer, noopener,
prev, and more.
<chi-link href="#" rel="noopener">Link</chi-link><a class="chi-link" href="#" rel="noopener">Link</a>
Download
Use download to prompt users to save a page or document instead of navigating to it. The download attribute accepts an optional value used to name the file. If no value is provided, the original filename is used.
<!-- Use default filename -->
<chi-link href="#" download>Link</chi-link>
<!-- Sepcify custom filename -->
<chi-link href="#" download="custom-filename">Link</chi-link><!-- Use default filename -->
<a class="chi-link" href="#" download>Link</a>
<!-- Sepcify custom filename -->
<a class="chi-link" href="#" download="custom-filename">Link</a>
Hreflang
Use to set the language of the link.
<chi-link href="#" hreflang="en">Link</chi-link><a class="chi-link" href="#" hreflang="en">Link</a>
Additional Sizes
Links support the following sizes:
xs, sm, md, lg,
and xl. By default, links inherit the font-size of their parent element.
xs
sm
md
lg
xl
<!-- xs -->
<chi-link href="#" size="xs">Link</chi-link>
<!-- sm -->
<chi-link href="#" size="sm">Link</chi-link>
<!-- md -->
<chi-link href="#" size="md">Link</chi-link>
<!-- lg -->
<chi-link href="#" size="lg">Link</chi-link>
<!-- xl -->
<chi-link href="#" size="xl">Link</chi-link><!-- xs -->
<a class="chi-link -xs" href="#">Link</a>
<!-- sm -->
<a class="chi-link -sm" href="#">Link</a>
<!-- md -->
<a class="chi-link -md" href="#">Link</a>
<!-- lg -->
<a class="chi-link -lg" href="#">Link</a>
<!-- xl -->
<a class="chi-link -xl" href="#">Link</a>